当前位置：首页 > article >正文

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

article 2024/11/15 12:18:56

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

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) {
        // 预览 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);
});