Read Pdf File With Html5 File Api
I want to make a form with React and upload pdf files. I've to implement until here but now my app needs to read data from pdf without saving in backend database etc. The whole fun
Solution 1:
You can use PDF.js to read the content of PDF file using javascript/jQuery. Here is my working example.
$("#file").on("change", function(evt){
var file = evt.target.files[0];
//Read the file using file readervar fileReader = newFileReader();
fileReader.onload = function () {
//Turn array buffer into typed arrayvar typedarray = newUint8Array(this.result);
//calling function to read from pdf filegetText(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.functiongetText(typedarray) {
//PDFJS should be able to read this typedarray contentvar pdf = PDFJS.getDocument(typedarray);
return pdf.then(function (pdf) {
// get all pages textvar maxPages = pdf.pdfInfo.numPages;
var countPromises = [];
// collecting all page promisesfor (var j = 1; j <= maxPages; j++) {
var page = pdf.getPage(j);
var txt = "";
countPromises.push(page.then(function (page) {
// add page promisevar textContent = page.getTextContent();
return textContent.then(function (text) {
// return content promisereturn text.items.map(function (s) {
return s.str;
}).join(''); // value page text
});
}));
}
// Wait for all pages and join textreturnPromise.all(countPromises).then(function (texts) {
return texts.join('');
});
});
}
};
//Read the file as ArrayBuffer
fileReader.readAsArrayBuffer(file);
});<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.87/pdf.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><inputtype="file"id="file"name="file"accept="application/pdf"><br><pid="content"></p></body>
Post a Comment for "Read Pdf File With Html5 File Api"