我想用 React 制作一个表单并上传 pdf 文件。我必须实现到这里，但现在我的应用程序需要从 pdf 读取数据而不保存在后端数据库等中。整个功能用作预检查器。 有什么建议吗？
【问题讨论】：
标签： javascript html reactjs
您可以使用 PDF.js 使用 javascript/jQuery 读取 PDF 文件的内容。这是我的工作示例。
$("#file").on("change", function(evt){
var file = evt.target.files[0];
//Read the file using file reader
var fileReader = new FileReader();
fileReader.onload = function () {
//Turn array buffer into typed array
var typedarray = new Uint8Array(this.result);
//calling function to read from pdf file
getText(typedarray).then(function (text) {
/*Selected pdf file content is in the variable text. */
$("#content").html(text);
}, function (reason) //Execute only when there is some error while reading pdf file
{
alert('Seems this file is broken, please upload another file');
console.error(reason);
});
//getText() function definition. This is the pdf reader function.
function getText(typedarray) {
//PDFJS should be able to read this typedarray content
var pdf = PDFJS.getDocument(typedarray);
return pdf.then(function (pdf) {
// get all pages text
var maxPages = pdf.pdfInfo.numPages;
var countPromises = [];
// collecting all page promises
for (var j = 1; j <= maxPages; j++) {
var page = pdf.getPage(j);
var txt = "";
countPromises.push(page.then(function (page) {
// add page promise
var textContent = page.getTextContent();
return textContent.then(function (text) {
// return content promise
return text.items.map(function (s) {
return s.str;
}).join(''); // value page text
});
}));
}
// Wait for all pages and join text
return Promise.all(countPromises).then(function (texts) {
return texts.join('');
});
});
}
};
//Read the file as ArrayBuffer
fileReader.readAsArrayBuffer(file);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.87/pdf.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="file" id="file" name="file" accept="application/pdf">
<br>
<p id="content"></p>
</body>【讨论】：