文章/答案/技术大牛

发布

js pdfjs

PDF.js 是一个由 Mozilla 开发的用于解析和渲染 PDF 文档的开源 JavaScript 库。它允许开发者在前端应用中嵌入 PDF 文件，并提供了一套丰富的 API 来操作 PDF 内容。

基础概念：

PDF.js：一个基于 JavaScript 的库，可以在浏览器中解析和渲染 PDF 文件。
API：提供了一系列方法和事件，允许开发者与 PDF 文档交互，如获取页面内容、注释、表单字段等。

相关优势：

跨平台：由于是基于 JavaScript，因此可以在任何支持 JavaScript 的平台上运行。
开源：可以免费使用和修改源代码。
丰富的功能：支持文本、图像、表格、注释等多种 PDF 元素的渲染和处理。
可定制性：可以通过 API 自定义 PDF 的显示方式，如缩放、旋转、打印等。

类型：

核心库：负责 PDF 文件的解析和渲染。
视图库：提供了一套用户界面组件，方便开发者集成到自己的应用中。

应用场景：

在线文档查看器：用户可以直接在浏览器中查看 PDF 文件。
电子书阅读器：可以在网页或移动应用中提供电子书阅读功能。
表单填写和处理：处理 PDF 表单的填写和提交。
文档转换：将 PDF 文档转换为其他格式，如 HTML、图片等。

常见问题及解决方法：

PDF 不显示或显示不完整：
- 确保 PDF.js 库已正确加载。
- 检查 PDF 文件路径是否正确。
- 确认 PDF 文件没有损坏。
- 调整浏览器控制台中的缩放设置。

性能问题：
- 对于大型 PDF 文件，可以考虑分页加载或使用虚拟滚动技术。
- 减少不必要的渲染操作，如避免重复渲染同一页面。
兼容性问题：
- 确保使用的 PDF.js 版本与浏览器版本兼容。
- 对于旧版浏览器，可能需要使用 polyfill 或降级处理。

示例代码：以下是一个简单的 PDF.js 使用示例，展示如何在网页中嵌入并显示 PDF 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF.js 示例</title>
    <script src="pdfjs-dist/build/pdf.js"></script>
</head>
<body>
    <canvas id="pdf-canvas"></canvas>
    <script>
        // 加载 PDF 文件
        pdfjsLib.getDocument('sample.pdf').promise.then(function(pdf) {
            // 获取第一页
            return pdf.getPage(1);
        }).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale });

            // 准备 canvas 元素
            var canvas = document.getElementById('pdf-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // 渲染页面
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        }).catch(function(error) {
            console.error('Error loading PDF: ', error);
        });
    </script>
</body>
</html>

在这个示例中，pdfjs-dist/build/pdf.js 是 PDF.js 库的路径，sample.pdf 是要显示的 PDF 文件路径。通过调用 pdfjsLib.getDocument 方法加载 PDF 文件，并通过 getPage 方法获取特定页面，最后使用 render 方法将页面渲染到 canvas 元素上。

如果你在使用 PDF.js 时遇到具体的问题，可以提供更详细的信息，以便进一步分析和解决。

页面内容是否对你有帮助？

有帮助

没帮助

未指定PDFJS.workerSrc

、

尝试在本地Apache服务器中使用PDF并在控制台中接收以下错误：这是非常奇怪的，因为我遵循示例中指定的所有内容PDFJS.getDocument('arquivo.pdf').then(function(pdf) { })/localhost:99/PDF/build/pdf.worker.work

浏览 11提问于2014-09-29得票数 16

回答已采纳

3回答

Vue:在组件中使用自定义libary (pdf.js)

、、

因此，我将pdf.js和pdf.worker.js放在/src/pdf.worker.js/供应商/pdfjs中。/template-editor.bundle.js"></script> <script src="/assets/vendor/pdfjs/pdf.js"></script>

浏览 0提问于2017-10-05得票数 2

回答已采纳

2回答

如何在RequireJS中使用pdf.js？

、、、

我正在尝试在使用RequireJS的Magento2中实现pdf.js，既然下面的全局变量还不可访问，我如何实现它呢？// Loaded via <script> tag, create shortcut to access PDF.js exports. var pdfjsLib = window['pdfjs-dist

浏览 112提问于2019-10-02得票数 0

1回答

使用webpack dev-server (vue-cli-service)将自定义工作者导入组件vuejs中。

、、

/pdfjs-dist/build/pdf.worker.js' // pdfjsLib.GlobalWorkerOptions.workerSrc = './..

浏览 21提问于2021-01-28得票数 0

回答已采纳

1回答

未处理错误:未定义变量: PDFJS仅用于Opera

、、

我使用如下导入的pdfjs我有将PDF呈现到画布的脚本： function r

浏览 2提问于2017-02-04得票数 0

回答已采纳

2回答

使用“React”时应对应用程序抛出错误作出反应

、、、

解决这个问题(暂时)的一项工作是从node-modules/build/pdfjs-dist/build文件夹中复制pdf.worker.js文件，并将其放在my react应用程序的公用文件夹中。然后在我的index.js文件中放置以下代码：window.PDFJS.workerSrc = process.env.PUBLIC_URL+ '/pdf.work

浏览 1提问于2018-12-10得票数 3

2回答

PDF.js在IE 11上不起作用

、、、

我已经找了好几天了，但我仍然无法让在IE11上工作，无论IE11是否被列为，如中所示。

浏览 12提问于2018-04-22得票数 2

1回答

使用react-pdf加载pdf

、

default BasicComponent; 我在开发模式下检查了调试程序，结果显示为Uncaught SyntaxError: Unexpected token '<' in pdf.worker.js

浏览 68提问于2021-07-29得票数 0

1回答

PDFJS Chrome扩展

、、

<anonymous> (chrome-extension://nhbmpffpjhndjdpmlahapejappacnkcc/pdfjs/pdf.js:661:2) at Object.<anonym

浏览 95提问于2019-07-26得票数 0

回答已采纳

1回答

带有react和django的Pdf.js

、、、

我正在尝试用React.js作为前端开发一个pdf查看器问题是The查看器在react项目上工作得很好，但是当我构建它(npm运行构建)并将它复制到django项目时，它就不工作了。

浏览 13提问于2022-04-05得票数 0

回答已采纳

1回答

如何使用google云功能中的pdfjs来接受从Dropbox读取的pdf作为fileBinary？

、、、

上下文我在做什么npm i --save pdfjs-dist> data: structuredClone(obj, transfers)> > ReferenceError\node_modules\pdfjs-dist\build\pdf.js

浏览 10提问于2022-07-26得票数 1

回答已采纳

3回答

按照pdf.js网站上的示例，我知道如何在客户端渲染pdf，但在服务器端渲染时会遇到问题。我用npm i pdfjs-dist下载了这个包var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf'; var pdfjsLib = require(&qu

浏览 25提问于2020-10-04得票数 9

1回答

pdfjs与magento 2

、、、

我可以集成pdfjs与magento 2 requireJS。我已经从这里下载了文件：https://cdnjs.com/libraries/pdf.js，并将它们放在my_theme/web/js/文件夹中要求脚本增加pdfjs： my_theme/web/js/requirejs-config.js var config = { '

浏览 14提问于2020-10-06得票数 0

回答已采纳

2回答

响应显示pdf来自IPFS

、、

而控制台中的这个错误有人试过这样做吗？

浏览 0提问于2019-04-06得票数 0

1回答

使用Hammer.js对PDF.js进行收缩缩放

、、

我正试着用我的PDF.js使用Hammer.js来执行一个收缩缩放，然而，尽管尝试了很多次，它还是不能工作。当我在我的手机上调试我的代码时，我也没有收到任何错误，但是我仍然不能用手指来放大和缩小。如果你知道哪里出了问题，请帮助，我的代码如下所示：<body> <script type="text/javascript" src="reportviewer/hammer.js

浏览 1提问于2016-12-08得票数 3

1回答

与webpack一起在npm模块中外部化pdf.js

、、、

我目前正在vue.js和vuetify之上构建某种UI组件库。一个组件是一些pdf查看器，它使用pdf.js来呈现pdf。所有外部库都应该从捆绑包中排除，而是安装在“消费”项目中。我在我的SFC中加载这样的pdfjs： return pdfJs.getDocumentconfig.externals({

浏览 12提问于2020-06-09得票数 1

1回答

pdfjs可以与类型记录一起运行吗？

、、、

我想预览pdf作为画布，但我不能导入pdfjs在我的项目。我还需要进口别的东西吗？pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js'; Couldnot find a declaration file for module &#x

浏览 21提问于2022-09-06得票数 0

1回答

SyntaxError:导入pdfjs的意外令牌“||=”

、

尝试在节点js应用程序中使用pdfjs-dist创建新节点js应用程序(模块)，然后：-package.json是：- "start": "node testpdf.js" "dependencies": { "pdfjs-dist": &

浏览 2提问于2022-05-07得票数 1

1回答

Nodejs:依赖于环境的便利记录器

、

<anonymous> (/Users/node_modules/pdfjs-dist/build/pdf.js:669:2) at Object.defineProperty.value (/Users/node_

浏览 7提问于2020-04-30得票数 0

1回答

如何为PDF工作人员设置自定义路径

、、、

我使用npm install npm install pdfjs-dist下载的内容，还找到了一个pdf.worker.min.js文件，该文件位于我的项目的shared文件夹中。所以，在我的main-area.component.ts里import * as pdfjsLib from 'pdfjs-dist/build/pdf'; ....当页面打开时，我可以在浏

浏览 1提问于2020-02-05得票数 0

回答已采纳

点击加载更多