Reactjs 如何使用react js中的ReactFileReader组件读取不同文件（.txt、.pdf、.docx）的内容

我想在react js中读取上传文件的内容（具有不同的文件扩展名，可能是.txt、.docx、.pdf）。我的代码如下。现在我正在使用ReactFileReader组件。在我的代码中，它可以读取txt文件的内容。它无法读取pdf、docx的内容。如何解决这个问题。请帮帮我。多谢各位

import React, { Component } from "react";
import ReactFileReader from 'react-file-reader';
    
class DisplayController extends Component {
    constructor(props){
        super(props)
        this.state = {
            value: '',
            file : ""
        }
    }
    
    handleFiles = files => {
        let reader = new FileReader();
        
        reader.onload = function () {
            alert("Read Data : " + reader.result)
        }
        
        reader.readAsText(files[0])
    }
 
    render() {
        return (
            <form>
                <div className="files">
                    <ReactFileReader fileTypes={['.pdf','.txt','.docx']} handleFiles={this.handleFiles}>
                        <button className='btn'>Upload</button>
                    </ReactFileReader>
                </div>
            </form>
        )
    }
}
    
export default DisplayController;

import React，{Component}来自“React”；
从“react文件读取器”导入react文件读取器；
类DisplayController扩展组件{
建造师（道具）{
超级（道具）
此.state={
值：“”，
档案：“
}
}
handleFiles=文件=>{
let reader=new FileReader（）；
reader.onload=函数（）{
警报（“读取数据：+reader.result”）
}
reader.readAsText（文件[0]）
}
render（）{
返回(
上传
)
}
}
导出默认显示控制器；

读取docx文件的内容非常复杂，但并非不可能：该文件是一个.zip文件，其中包含许多其他文件，而这些文件又包含描述文件内容的XML标记。 但这通常不是在浏览器中完成的，因为默认情况下，浏览器中没有提供实现这一点所需的工具。您可能需要几十个额外的库来处理这个问题。 类似的事情可能应该在服务器上完成

然而，阅读pdf的内容几乎是完全不可能的。pdf可以采用多种形式，在最坏的情况下，它没有嵌入字符串字符，而是包含字形或少量字符图像，以及每个字符的坐标。 除非您知道创建pdf的确切工具，并且确切知道该文件的内部外观，否则将其解析为文本是不可行的。

---

如果与您的用例相匹配，您可以研究使用组件向用户显示pdf。这应该是可能的。

首先，用javascript阅读和显示PDF很容易。那里有一个图书馆。但是，如果我正确理解了

react file reader

的功能，那么文件的内容就完全无关了。@Sulthan rendering for the human to read，yes。但从OPs示例中，他们希望提取文本。由于复杂的文件格式，这在每种语言中都很重要。不能保证pdf中的字符是按顺序存储的。它们可以从下到上、从右到左或从页面中心呈螺旋状存储。对人眼来说更容易，几乎不可能解析。是否尝试过复制和粘贴格式不正确的pdf？很多时候你甚至需要OCR，如果这样做有效的话。我想你误解了这个问题，但也许你是对的。问题并非如此clear@phry使用pdfjs dist包可以读取js中的pdf文件内容。但是，它不适用于react和idk why。但是在js中阅读pdf内容不是问题，有一些pckages/libaries很容易为您提供that@PraiseHart该包将显示内容，但不会使内容作为字符串可用。问题的措辞不是“向用户显示内容”，而是“读取”内容，代码示例明确尝试访问

readAsText

方法，因此我仍然假设OP需要字符串。不要将文件作为文本读取，而是作为数据读取。你为什么要读呢？只需将blob添加到表单数据中。