前端读取PDF和DOCX文件-干货分享
1. 读取PDF文件内容1.1 使用JavaScript库PDF.js 使用示例 2. 读取DOCX文件内容2.1 使用JavaScript库mammoth.js 使用示例 3. 通过PDF Reader库读取文件内容(推荐)结论
⚠️⚠️文前推荐一下?
前端必备工具推荐网站(图床、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文件。尽管它主要用于渲染而非直接读取文本内容，但你可以通过访问渲染后的页面元素来获取文本。
<!DOCTYPE html> <html> <head> <title>Read PDF Content</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script></head> <body> <input type="file" id="pdf-file-input"> <div id="pdf-container"></div> <script> window.onload = function() { async function readPDFPage(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, ' '); } async function readPDFDoc(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) { throw new Error(err); } } document.getElementById('pdf-file-input').addEventListener('change', function(event) { const file = event.target.files[0]; if (!file || file.type !== 'application/pdf') { return alert('Please upload a PDF file.'); } const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = async (event) => { const text = await readPDFDoc(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 使用示例
<!DOCTYPE html><html><head> <title>Mammoth.js Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script></head><body> <input type="file" id="docxInput"> <div id="result"></div> <script> window.onload = function() { function handleFileInput(event) { const file = event.target.files[0]; if (file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { return alert('Please upload a DOCX file.'); } const reader = new FileReader(); reader.onload = function(e) { const arrayBuffer = e.target.result; mammoth.convertToHtml({arrayBuffer: arrayBuffer}) .then(function(result){ var html = result.value; // The generated HTML var 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
npm install pdf-view-readerimport PDFViewReader from 'pdf-view-reader';const viewer = new PDFViewReader();读取或预览 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库或结合后端服务，我们可以有效实现这一功能。选择合适的工具和方法取决于具体的应用场景和性能要求。希望本文的内容能够对你的开发工作有所帮助。