pdf在线浏览插件pdf.js使用说法举例

发布时间:2019-06-29 20:34:22 来源:青锋建站 作者:青锋建网站
  我们在制作网站时,有时候需要在项目中使用在线浏览PDF文件的功能,使用pdf.js可以实现这一功能,以下是青锋建站给大家分享的pdf在线浏览插件pdf.js使用说法与举例。

pdf.js在线演示

https://mozilla.github.io/pdf.js/web/viewer.html

pdf.js浏览器扩展

Firefox
PDF.js内置于Firefox版本19中。
Chrome
Chrome的官方扩展可从ChromeWeb商店安装。此扩展名为@Rob--W.
BuildYourOwn获取下面解释的代码,并发出GulpChromium。然后打开Chrome,转到“工具”>“扩展”,然后从目录构建/铬加载(未打包)扩展名。

下载pdf.js代码

通过GIT方式
要获得当前代码的本地副本,请使用git克隆它:
$ git clone https://github.com/mozilla/pdf.js.git
$ cd pdf.js
接下来,通过官方包或NVM安装Node.js。您需要在全球范围内安装GUP包(也请参阅GULP的入门):
$ npm install -g gulp-cli
如果一切顺利,请安装PDF.js的所有依赖项:
$ npm install
最后,您需要启动本地Web服务器,因为某些浏览器不允许使用file://URL打开PDF文件。运行:
$ gulp server
打开如下网址测试pdf.js
http://localhost:8888/web/viewer.html
请记住,这需要一个与ES6兼容的浏览器;请参阅BuildPDF.js,以便与旧浏览器一起使用。还可以通过打开以下命令查看右侧的所有测试PDF文件:
http://localhost:8888/test/pdfs/?frame
通过CDN方式
PDF.js托管在几个免费的CDN上:
https://www.jsdelivr.com/package/npm/pdfjs-dist
https://cdnjs.com/libraries/pdf.js
https://unpkg.com/pdfjs-dist/
创建pdf.js代码
为了将所有src/文件绑定到两个生产脚本中并构建泛型查看器,请运行:
$ gulp generic
  这将在build/generic/build/目录中生成pdf.js和pdf.worker.js。这两个脚本都是必需的,但是只需要包含pdf.js,因为pdf.worker.js将由pdf.js加载。PDF.js文件很大,应该用于生产。

在web应用中使用pdf.js

  要在Web应用程序中使用PDF.js,可以选择使用预先构建的库版本或从源代码构建它。我们提供预先构建的版本,以便在pdfjs-Dist名称下使用NPM和Bower。有关更多信息和示例,请参阅有关此主题的wiki页面。更多关于pdf.js的使用与帮助信息:https://mozilla.github.io/pdf.js/

pdf.js使用举例说明

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>'Hello, world!' example</title>
</head>
<body>
<h1>'Hello, world!' example</h1>
<canvas id="the-canvas" style="border:1px  solid black"></canvas>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script id="script">
  //假如从远程服务器提供了绝对网址,配置cors在头部
  var url = './helloworld.pdf';
  // The workerSrc property 应该被明确指定
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    '../../node_modules/pdfjs-dist/build/pdf.worker.js';
  //异步的加载PDF文件
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    //接收第一页
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale, });
      //使用PDF页面规格加载画布
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      //渲染PDF页面
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
</script>
<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
  document.getElementById('code').textContent =
      document.getElementById('script').text;
</script>
</body>
</html> 
  以上就是青锋建站给大家分享的pdf在线浏览插件的使用与举例。青锋建站,提供专业的高品质网站制作服务,包括网站建设,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,为企业构建强有力的营销平台。
分享到:

Copyright © 2016-2026 青锋建站 版权所有