PDF网页展示--PDF.js

原创于 2017-04-10 10:06:53 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#pdf #网页

web开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了PDF.js，这是由Mozilla开发的一个用于浏览器展示PDF文件的组件。支持多种浏览器包括火狐、谷歌和IE（9及以上）。文中详细描述了如何通过iframe内嵌的方式将PDF文件嵌入到网页中，并提供了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章已经生成可运行项目，

1.功能介绍

PDF.js是Mozilla公司开发的pdf浏览器展示组件，项目主页位于https://github.com/mozilla/pdf.js

PDF.js支持火狐、谷歌和IE（9及以上）等浏览器。

2.示例

直接使用Mozilla提供的代码，见示例文件夹PDFViewer。文件夹中除1.html外都是Mozilla官方案例提供。

我们采用将Mozilla提供的PDF展示页面viewer.html通过iframe内嵌的方式展示在我们自己的页面中

<iframe id="pdfFrame" src="viewer.html" style="width:800px;height:500px" />

通过设置页面的参数file指定待展示的pdf访问路径

<script>
showPdf = function(file){
    document.getElementById("pdfFrame").src="viewer.html?file="+file;
}
</script>
<button onclick="showPdf('file/Oracle12c Development Guide.pdf')">show1</button>
<button onclick="showPdf('file/compressed.tracemonkey-pldi-09.pdf')">show2</button>