PDF 渲染插件

最近,有在前端显示电子合同的需求,而电子合同是 PDF 格式,如果直接打开路径某些浏览器会直接下载,某些浏览器可以直接查看,为了让所有浏览器都可以在线查看 PDF 文件,开始了漫漫寻求插件之路。

Viewer.js

这是我找到的最好用的在线查看文档的插件,可以支持很多文件格式,PDF、ODF 等。

相关链接:ViewerJS 官网Open Document FormatOpen OfficeLibre OfficeMicrosoft OfficeCalligra Suite

使用也极其方便,将 ViewerJS 整个包下载,解压到比如 localhost 服务下的 /ViewerJS 目录下,在根目录下放一个测试的 pdf 文件,比如 test.pdf,然后在浏览器中输入:

http://localhost/ViewerJS/index.html#./test.pdf

即可看到效果。

如果想要嵌到其他页面,使用 iframe 即可:

iframe(src="/ViewerJS/index.html#./test.pdf" width="100%" height="100%")

效果如下:

PDF.js

事实上,上面提到的 ViewerJS 的核心工作是由 PDF.js 担任的,在 ViewerJS 官网中也提到 The heavy lifting in ViewerJS is done by these awesome projects: PDF.js (by Mozilla) ...

处于对核心项目的敬畏之心,我研究了下 PDF.js。

相关链接:PDF.js 官网PDF.js - GitHub

不过相比于 Viewer.js,PDF.js 用起来可能会稍微麻烦一些。

如果去 GitHub 下载,需要手动编译打包,比较麻烦,直接在官网上下载即可:http://mozilla.github.io/pdf.js/getting_started/

也可以到以下 CDN 直接下载打包后的文件:

首先同样下载 PDF.js 的整个包,仍然解压到 localhost 服务下的 /pdfJS 目录下。

/pdfJS/prebuild 目录下有一个 viewer.html,直接使用此文件即可加载 PDF:

http://localhost/pdfjs/prebuild/viewer.html?file=./test.pdf

当然也可以直接加载核心文件 pdf.js 和 pdf.worker.js,做到自己定制的目的:

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .lightbox{ position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 7; opacity: 0.3; display: block; background-color: rgb(0, 0, 0); }
    .pop{ position: absolute; left: 50%; width: 894px; margin-left: -447px; z-index: 9; }
  </style>
  <script src="pdfJS/build/pdf.js" type="text/javascript"></script>
  <script type="text/javascript">
    function showPdf() {
      var container = document.getElementById("container");
      container.style.display = "block";
      var url = './test.pdf';
      PDFJS.workerSrc = 'pdfJS/build/pdf.worker.js';
      PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
          pdf.getPage(1).then(function getPageHelloWorld(page) {
            var scale = 1;
            var viewport = page.getViewport(scale);
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            page.render(renderContext);
          });
      });
    }
  </script>
</head>
<body>
  <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
  <div id="container" style="display: none;">
    <div class="lightbox"></div>
    <div id="pop" class="pop">
      <canvas id="the-canvas"></canvas>
    </div>
  </div>
</body>
</html>

PDFObject

这玩意也不错,不过在移动端支持似乎不太好:

而在PC上还不错:

相关链接:PDFObject 官网PDFObject - GitHub

使用方式很容易:

  1. 先创建一个容器:
<div id="example1"></div>
  1. 引入脚本,并将要渲染的 PDF 挂载到容器:
<script src="./PDFObject/pdfobject.js"></script>
<script>PDFObject.embed("./test.pdf", "#example1");</script>
  1. 加上适当的样式,就完美了:
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }

其他相关 PDF 插件

在寻找的过程中还发现一些其他不错的插件,不过都没怎么深入研究,先列出来,有时间再回头看看。

参考资料

pdf.js跨域加载文件

动态PDF在线预览

pdf.js 使用实例

pdf.js实现在HTML下直接浏览pdf文档,无需插件即可实现

PDF.js 在线pdf阅读插件(禁止打印,下载,每页水印)

[js学习笔记]PDF.js专题

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress