pdf.js——在线预览下载打印pdf文件插件

最新推荐文章于 2025-10-31 01:04:17 发布

原创最新推荐文章于 2025-10-31 01:04:17 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #html

html 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在HTML页面中利用PDF.js库来展示PDF文件。首先，需要下载PDF.js并将其放入项目的静态文件夹。然后，通过创建iframe标签并设置src属性为PDF.js的viewer.html与PDF文件路径结合，可以实现PDF的显示。同时，文章还展示了如何在JavaScript中动态设置iframe的src，以及如何获取和跳转PDF的页码。对于不支持HTML5的IE浏览器，要求至少使用IE9。此外，还提供了在URL中添加#page=参数来直接跳转到指定页码的方法。

html页面使用

下载PDF.js， http://mozilla.github.io/pdf.js/getting_started/#download
将 pdfjs 文件夹放到项目static文件夹下
代码示例（需要浏览器支持html5，IE必须是9及以上）

<iframe id="iframe1" src="/static/pdfjs/web/viewer.html?file=xxx.pdf"></iframe>


可以在js中动态赋值
var prefixUrl = '/static/pdfjs/web/viewer.html?file=';
var pdfUrl = 'http://网址/' + xxx.pdf;

document.getElementById('iframe1').src = prefixUrl + pdfUrl;
或
$("#iframe1").attr("src", prefixUrl + pdfUrl);

扩展

获取页码

var iFrame = document.getElementById('iframe1');
if (iFrame.contentDocument) {
    // 当前页码
    var pageNumber = iFrame.contentDocument.getElementById('pageNumber').value;
    // 最大页码
    var pageNumberMax = iFrame.contentDocument.getElementById('pageNumber').max;
}