前端读取PDF和DOCX文件(干货分享)

前端读取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);
});