前端读取PDF和DOCX文件-干货分享
⚠️⚠️文前推荐一下👉
前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
在Web开发中，前端页面往往需要处理各种类型的文件，特别是PDF和DOCX这类常见的文档格式。读取这些文件的内容对于文档预览、内容提取或在线编辑等功能尤为重要。本文将介绍几种在前端实现读取PDF和DOCX文件内容的技术方法。
1. 读取PDF文件内容
1.1 使用JavaScript库
对于PDF文件的读取，可以借助一些流行的JavaScript库，如
PDF.js
或
pdfplumber
（后者虽然主要在Python中使用，但此处作为参考说明JavaScript库的选择和用法）。然而，
PDF.js
是一个纯JavaScript编写的库，适用于在浏览器端渲染PDF文件。
PDF.js 使用示例
PDF.js
由Mozilla开发，可以在网页中渲染PDF文件。尽管它主要用于渲染而非直接读取文本内容，但你可以通过访问渲染后的页面元素来获取文本。
<!DOCTYPEhtml><html><head><title>Read PDF Content</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script></head><body><inputtype="file"id="pdf-file-input"><divid="pdf-container"></div><script>
window.onload=function(){asyncfunctionreadPDFPage(doc, pageNo){const page =await doc.getPage(pageNo);const tokenizedText =await page.getTextContent();const pageText = tokenizedText.items.map(token=> token.str).join(' ');return pageText.replace(/\s+/g,' ');}asyncfunctionreadPDFDoc(file){try{const doc =await pdfjsLib.getDocument(file).promise;const pageTextPromises =[];for(let pageNo =1; pageNo <= doc.numPages; pageNo++){
pageTextPromises.push(readPDFPage(doc, pageNo));}const pageTexts =await Promise.all(pageTextPromises);return pageTexts.join('\n');}catch(err){thrownewError(err);}}
document.getElementById('pdf-file-input').addEventListener('change',function(event){const file = event.target.files[0];if(!file || file.type !=='application/pdf'){returnalert('Please upload a PDF file.');}const reader =newFileReader();
reader.readAsArrayBuffer(file);
reader.onload=async(event)=>{const text =awaitreadPDFDoc(event.target.result);
console.log('pdf text data:', text)
document.getElementById('pdf-container').innerHTML = text;};
reader.onerror=(err)=>{
console.log('err:', err)};});}</script></body></html>
2. 读取DOCX文件内容
2.1 使用JavaScript库
对于DOCX文件，JavaScript中可以使用
mammoth.js
这样的库来解析并转换为HTML或其他前端友好的格式。
mammoth.js 使用示例
<!DOCTYPEhtml><html><head><title>Mammoth.js Example</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script></head><body><inputtype="file"id="docxInput"><divid="result"></div><script>
window.onload=function(){functionhandleFileInput(event){const file = event.target.files[0];if(file.type !=='application/vnd.openxmlformats-officedocument.wordprocessingml.document'){returnalert('Please upload a DOCX file.');}const reader =newFileReader();
reader.onload=function(e){const arrayBuffer = e.target.result;
mammoth.convertToHtml({arrayBuffer: arrayBuffer}).then(function(result){var html = result.value;// The generated HTMLvar messages = result.messages;// Any messages, such as warnings during conversion
document.getElementById('result').innerHTML = html;}).catch(function(err){
console.error(err);});};
reader.readAsArrayBuffer(file);}
document.getElementById('docxInput').addEventListener('change', handleFileInput,false);}</script></body></html>
3. 通过PDF Reader库读取文件内容(推荐)
如果不想自己原生去实现这里推荐一个好用js库,他已经帮我们封装好了这些文件的读取能力,直接使用就可以,非常方便.
pdf-view-reader官网: https://www.npmjs.com/package/pdf-view-reader
- 1、安装库
npm install pdf-view-reader
- 2、使用示例
import PDFViewReader from'pdf-view-reader';const viewer =newPDFViewReader();
读取或预览 PDF 文件
document.getElementById('fileInput').addEventListener('change',function(event){const file = event.target.files[0];if(file){// 预览 PDF
viewer.readOrPreviewPdf(file,'view',(text)=>{
console.log("PDF preview:", text);// 'text' 在预览模式下通常不使用，因为预览是直接在 DOM 中渲染的},(error)=>{
console.error('Error previewing PDF:', error);},'xdsxssxc');// 预览容器的 ID// 或者读取 PDF 文本内容// viewer.readOrPreviewPdf(file, 'read', (text) => {// console.log("PDF Text:", text);// document.getElementById('xdsxssxc').innerHTML = text;// }, (error) => {// console.error('Error reading PDF:', error);// });}});
读取 DOCX 文件
viewer.readDocx(file,(data)=>{
console.log("readDocx Text data:", data.text);
document.getElementById('xdsxssxc').innerHTML = data.text;},(error)=>{
console.error('Error reading DOCX:', error);});
结论
前端读取PDF和DOCX文件内容的需求在现代Web应用中非常普遍。通过适当的JavaScript库或结合后端服务，我们可以有效实现这一功能。选择合适的工具和方法取决于具体的应用场景和性能要求。希望本文的内容能够对你的开发工作有所帮助。
本文转载自: https://blog.csdn.net/qq_48896417/article/details/142501487
版权归原作者 LuckyCola2023 所有， 如有侵权，请联系我们删除。
版权归原作者 LuckyCola2023 所有， 如有侵权，请联系我们删除。