如何在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;

解决方法

读取docx文件的内容非常复杂，但并非不可能：该文件是.zip文件，其中包含许多其他文件，而这些文件又包含描述文件内容的XML标记。但这通常不是在浏览器中完成的，因为默认情况下，浏览器都不附带所需的工具。您可能需要数十个其他库来处理。这样的事情可能应该在服务器上完成。

但是，几乎完全不可能阅读pdf的内容。 pdf可以采用许多形式，在最坏的情况下，它没有嵌入字符串字符，而是字符的字形或小图像，以及每个字符的坐标。除非您知道创建pdf的确切工具，并且不知道该文件在内部的外观，否则将其解析为文本是不可行的。如果可以的话，您可以调查使用一个组件来向用户显示pdf。那应该是可能的。

file-read reactjs reactjs reactjs reactjs