pdf.js 大小

pdf.js 是一个用于在网页上显示 PDF 文件的开源 JavaScript 库。它基于 Mozilla 的 PDF 阅读器，允许开发者将 PDF 文档嵌入到网页中，而无需依赖任何插件。

基础概念

pdf.js 的核心是将 PDF 文件解析成可以在网页上渲染的格式。它使用 JavaScript 和 WebGL 来实现高效的渲染，并支持多种交互功能，如缩放、旋转、文本选择等。

类型

pdf.js 主要有两个版本：

完整版：包含所有功能，适用于需要完整 PDF 阅读器功能的项目。
精简版：只包含核心渲染功能，适用于只需要显示 PDF 文件的项目。

应用场景

在线文档查看器：在网页上提供 PDF 文档的查看功能。
电子书阅读器：将电子书以 PDF 格式展示在网页上。
报告和仪表盘：在企业应用中展示 PDF 格式的报告和仪表盘。

大小

pdf.js 的大小取决于所使用的版本和配置：

完整版：通常在 2MB 左右，具体大小可能因版本和构建配置而异。
精简版：通常在 1MB 左右，具体大小可能因版本和构建配置而异。

优化建议

如果担心 pdf.js 的大小影响页面加载速度，可以采取以下优化措施：

按需加载：只加载需要的部分，例如只加载渲染功能，而不加载文本选择功能。
代码分割：使用 Webpack 等工具进行代码分割，按需加载模块。
压缩和混淆：使用 Gzip 或 Brotli 压缩，以及代码混淆来减小文件大小。

示例代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF.js Example</title>
    <script src="pdfjs-dist/build/pdf.js"></script>
</head>
<body>
    <canvas id="pdf-canvas"></canvas>
    <script>
        pdfjsLib.getDocument('example.pdf').promise.then(function(pdf) {
            return pdf.getPage(1);
        }).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale });
            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);
        });
    </script>
</body>
</html>

在这个示例中，我们加载了一个名为 example.pdf 的 PDF 文件，并将其第一页渲染到一个 <canvas> 元素上。

总结

pdf.js 是一个功能强大且灵活的库，适用于需要在网页上显示 PDF 文件的各种场景。通过合理的优化措施，可以有效减小其大小，提升页面加载速度。

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

有帮助

没帮助

PDF模块，PDF全页高或全卷轴

、

但是当它被调整大小时，它不是完美的，框架比文档更高。当我尝试使用PDF:连续滚动选项时，它会中断。对我来说，这也应该是一个解决方案，这只是文件的高度。supportsMozChunkedClosure @supportsMozChunkedClosure pdf.js:28 Uncaught (在承诺中) ReferenceError: getOutputScale未定义在renderPage ( pdf.js:28 ) pdf.js:28 Uncaught (in允诺) ReferenceError: getOutpu

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

回答已采纳

2回答

使用pdf.js，我只能读到最多2MB的pdf，而不是更多，为什么？

、、、

在读了几页之后，我发现了一个错误如何更改pdf.js文件中的最大允许文件？

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

回答已采纳

2回答

将pdf添加到FancyBox图库

、

文档中写道："fancybox试图根据给定的url自动检测内容的类型。如果检测不到，也可以使用数据类型属性(或类型选项)手动设置类型。“我应该为pdf的data-type分配什么值？如果我将一个显式扩展名为.pdf的pdf文件添加到网页上的图库中，它将在fancybox图库中打开。但是，当在下载电路板上被例如href=“./ phpBB /file.php?id=15184”引用时，我得到错误信息“无法加载所请求的内容。请稍后再试。”

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

1回答

将HTML中的绝对位置(顶部和左侧)转换为PDF中的位置

、、、、

Context：我使用PDF.js将pdf呈现到画布原来的大小，我还使画布的容器与画布相同大小，而且没有边框。From我的研究，我知道PDF.js将PDF呈现为72 out，我也以1的比例呈现它，这是pdf的原始大小，所以我不知道这个偏移量是从哪里来的。我也看到，我不需要做任何部门的新闻部，因为新闻部，PDF.js所使用的是标准新闻部为PDF转换为图像。请帮助我找出这个偏移是从哪里来的，以及如何将这些HTML坐标转换成PDF坐标。

浏览 15提问于2022-09-07得票数 1

回答已采纳

1回答

具有PDFJS响应的pdf渲染器

、、、、

我可以在页面上显示PDF，也可以在页面的整个宽度显示PDF (好吧，我几乎不知道如何考虑滚动条)，但在调整大小事件方面仍然存在问题。你能帮帮我吗？http://code.jquery.com/jquery-3.2.1.min.js*/ PD

浏览 8提问于2017-11-01得票数 2

2回答

在Forge Viewer上查看PDF无法显示TEKLA创建的2D模型-无法映射字体Arial

:11506executeOperatorList @ pdf.js:11037_next @ pdf.js:9537requestAnimationFrame (async)_continue @pdf.js:9520 operatorListChange

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

1回答

未定义web组件的pdf.js导入

、、、、

我正在尝试写一个使用lit-html的网页组件，它将呈现一个用户选择使用pdf.js的PDF文件。但是，pdf.js导入会给出以下错误： webpackUniversalModuleDefinitionhttp://localhost:8003/node_modules/pdfjs-dist/b

浏览 13提问于2020-02-19得票数 1

1回答

角7如何减少生产规模

、、、、

生产建造: ng build -prod main.js(4.3mB)具有pdf.js(303 is )、pdf_viewer.js(100发展建屋:五楼这里main.js(1.2mb)不包含pdf.js(303 not )、pdf_viewer.js(100 Not)。这些都包含在vendor.js中。但pdfworker.js大小为1.51mB 谢谢

浏览 0提问于2021-05-21得票数 2

回答已采纳

2回答

错误:使用ReaderHeadersReady加载PDF时，工作人员的未知操作: PDF.js

、

pdf.js:276 Uncaught Error: Unknown action from worker: ReaderHeadersReady at error (pdf.js:276) at MessageHandler.messageHandlerComObjOnMessag

浏览 14提问于2017-07-28得票数 3

回答已采纳

4回答

如何使pdf.js库在中工作

、、、、

我使用pdf.js和pdf.worker.js来显示弹出模式。除了IE之外，它在每个浏览器中都能正常工作。对于这个问题，我看到了不同的答案，但没有一个对我有用。我尝试过让compatible.js使pdf.js工作，但没有帮助。你们中有人知道这件事吗？拜托我真的需要帮助。

浏览 2提问于2020-03-20得票数 4

回答已采纳

1回答

PDF JS : IE浏览器中不加载PDF

、

910/images/compatibility.js"></script><script> var

浏览 87提问于2020-04-21得票数 0

1回答

如何使用pdf.js而不定义pdf.worker位置

、

当使用pdf.js查看pdf时，我遇到了一个问题。问题来自于PDFJS.workerSrc设置。

浏览 5提问于2017-12-04得票数 1

回答已采纳

0回答

Blob pdf呈现错误无效的XRef流头

、、

Error: Invalid XRef stream header<System> PDFDocument_parse@resource://pdf.js/build/pdf.worker.js@resource:

浏览 35提问于2016-07-14得票数 2

回答已采纳

1回答

pdf.js :我们如何使用pdf.js获得当前的pdf页码

、、

当用户使用时，我希望从pdf.js获取当前的页面号。以下链接我的问题是如何从 pdf.js

浏览 9提问于2017-02-24得票数 3

回答已采纳

2回答

如何在火狐插件中使用pdf.js库？

、、、

我正在做一个火狐插件的insert，一个pdf文档在谷歌翻译页面，我想使用pdf.js。不想使用嵌入或如果标签来做它，我想做我自己的pdf查看器。我试图在火狐插件中使用pdj.js库，但它不起作用。content_scripts": [ "matches":["*://translate.google.com/*"], "js": ["script.js","pdf.js我确实尝试在页面的开头

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

2回答

如何将PDF浏览器中内置的色度集成到webapp应用程序中

、、、

pdf.js相对于内置浏览器PDF查看器有什么优势？更重要的是，是否建议了如何将我的webapp与Chromes内置的PDF查看器集成，以及如何满足以上两个条件？

浏览 8提问于2015-09-07得票数 0

3回答

如何将CSP与pdf.js结合使用？我对工人有意见

、、、

Content-Security-Policy" content=" script-src 'self' https://mozilla.github.io/pdf.js/build/pdf.js https://mozilla.github.io/pdf.js/build/pdf.worker.js; style-sr

浏览 28提问于2020-09-15得票数 0

回答已采纳

1回答

PDFJS Chrome扩展

、、

"Error at __w_pdfjs_require__ (chrome-exten

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

回答已采纳

1回答

如何将pdf.js嵌入到fancybox中

、、、、

PDF.js通过使用基于web标准的平台来解析和呈现PDF来解决这个问题。如何将pdf.js查看器嵌入到fancybox中？

浏览 6提问于2016-10-27得票数 0

3回答

停止pdf.js页面呈现

、

我使用pdf.js创建了一个简单的pdf查看器，它与next、以前的按钮和一些其他功能并排设置了2页。我使用了pdf.js回购中可用的helloworld示例，因为viewer.js文件对像我这样的菜鸟来说太复杂了。但是，当我多次单击“前一个/下一步”按钮时，pdf.js会呈现所有页面，而不是预期的最后一个页面。它会造成混乱。pdf.js的下面示例也有同样的问题。 (链接似乎只适用于火狐。)我想知道使pdf.js只呈现下一个/前一个按钮到达的最后一个页面的方法。pdf.js</

浏览 5提问于2013-08-05得票数 9

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

pdf.js 大小

基础概念

相关优势

类型

应用场景

大小

优化建议

示例代码

总结

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐