PDF Reader

概述

PDF Reader 是一个用于在网页中读取和预览 PDF、 DOCX 文件的 JavaScript 库。它提供简单而强大的 API，允许开发者轻松地在他们的 Web 应用程序中集成文件读取和预览功能。

安装

你可以通过 npm 安装 PDF Reader 库：

npm install pdf-view-reader

或者，你可以直接从你的项目中引入编译好的 dist/pdfViewReader.umd.js 文件。

使用

引入库

首先，你需要在你的 HTML 文件中引入 PDF Reader 库。如果你通过 npm 安装，你可以通过模块导入系统（如 ES6 import 或 CommonJS require）来引入它。如果你直接下载或使用 CDN，则可以使用 <script> 标签引入 dist/pdfViewReader.umd.js。

<!-- 通过 CDN 引入 -->
<script src="https://path.to/pdfViewReader.umd.js"></script>

<!-- 或者通过 npm 安装后，在你的模块中引入 -->
import PDFViewReader from 'pdf-view-reader';

初始化

在你的 JavaScript 代码中，首先需要创建一个 PDFViewReader 实例：

const viewer = new PDFViewReader();

读取和预览文件

读取或预览 PDF 文件

readOrPreviewPdf 方法允许你读取或预览 PDF 文件。你可以通过改变第二个参数（'read' 或 'view'）来选择是仅读取文本内容还是预览文件。

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 文件

readDocx 方法用于读取 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);
});

API 概览

• readOrPreviewPdf(file, type, successFn, errorFn, containerId?)

  • file: 选择的文件对象。
  • type: 字符串，'read' 或 'view'，指示是读取文本还是预览文件。
  • successFn: 成功回调函数，对于预览模式，这个回调可能不会接收太多有用信息，因为内容已直接渲染到 DOM。
  • errorFn: 错误回调函数。
  • containerId (可选): 预览模式时，PDF 的渲染容器 ID。

• readDocx(docxfile, successFn, errorFn)

  • docxfile: 选择的 DOCX 文件对象。
  • successFn: 成功回调函数，接收一个包含文本数据的对象。
  • errorFn: 错误回调函数。

注意事项

• 请确保文件输入元素 (<input type="file">) 允许用户选择相应的文件类型（PDF, TXT, DOCX）。
• 预览 PDF 时，需要提供一个有效的 DOM 容器 ID。
• 读取和预览大文件时，请注意性能和内存使用。

贡献

欢迎对 PDF Reader 库做出贡献！你可以通过提交问题、拉取请求或改进文档来帮助我们。

许可证

PDF Reader 库在 MIT 许可证下发布。请参阅 LICENSE 文件了解更多详情。