前端读取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 HTMLvar messages = result.messages; // Any messages, such as warnings during conversiondocument.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 = new PDFViewReader();
读取或预览 PDF 文件
document.getElementById('fileInput').addEventListener('change', function (event) {const file = event.target.files[0];if (file) {// 预览 PDFviewer.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库或结合后端服务，我们可以有效实现这一功能。选择合适的工具和方法取决于具体的应用场景和性能要求。希望本文的内容能够对你的开发工作有所帮助。
