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 青鋒建站 版權所有

超级狮子电子游艺