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

Question

我想在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;

Answer 1

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

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