pdf.js布署配置舉例說明與演示

發布時間:2019-06-29 23:15:35 來源:青鋒建站 作者:青鋒建網站

  PDF.js在很大程度上依賴于Promises的使用。如果你對promises來說是新手,建議你在繼續之前熟悉它們。青鋒建站給大家分享如何如果在網站中在線瀏覽pdf文件,將PDF.js用作Web瀏覽器中的庫,pdf.js的布署與配置過程。示例/提供了更多的示例,包括Node.js中的用法(位于示例/節點/)。

獲得PDF源文件

  PDF.js的對象結構松散地遵循實際PDF的結構。在頂層有一個文檔對象。可以從文檔中獲取更多信息和各個頁面。通過以下API可以獲得文件并顯示出來:
pdfjsLib.getDocument('helloworld.pdf')
請記住,PDF.js使用promises,上面將返回一個PDFDocumentLoadingTask實例,該實例具有一個promise屬性,該屬性是通過文檔對象解析的。
var loadingTask = pdfjsLib.getDocument('helloworld.pdf');
loadingTask.promise.then(function(pdf) {
  // you can now use *pdf* here
});

PDF.js設置頁面

既然我們有了文檔,我們就可以得到一頁了。同樣,這也使用了promises。
pdf.getPage(1).then(function(page) {
  // you can now use *page* here
});

PDF.js渲染頁面

  每個PDF頁面都有自己的視口,它定義了以像素(72 Dpi)和初始旋轉為單位的大小。默認情況下,視口被縮放到PDF的原始大小,但是可以通過修改viewport來改變它。在創建視圖端口時,還將創建一個初始轉換矩陣,該矩陣將考慮到所需的縮放、旋轉,并轉換坐標系(PDF中的0,0點記錄了左下角,而畫布0,0是左上角)。
var scale = 1.5;
var viewport = page.getViewport({ scale: 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);
或者,如果希望畫布呈現到某個像素大小,則可以執行以下操作:
var desiredWidth = 100;
var viewport = page.getViewport({ scale: 1, });
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport({ scale: scale, });

PDF.js交互示例

HelloWorld與文檔加載錯誤處理
該示例演示如何使用承諾來處理加載期間的錯誤。它還演示了如何等待頁面加載和呈現。
使用Base 64編碼PDF的HelloWorld
PDF.js可以接受任何解碼后的base 64數據作為數組。
Previous/Next example
不能使用相同的畫布同時繪制兩個頁面-該示例演示了如何等待上一次操作完成。
  以上就是青鋒建站給大家分享的pdf.js的布署配置舉例詳解。青鋒建站,提供專業的高品質網站制作服務,包括網站建設,SEO,網絡營銷,PHP開發,網站建設知名品牌,全國接單,為企業構建強有力的營銷平臺。
 

分享到:

Copyright © 2016-2026 青鋒建站 版權所有

超级狮子电子游艺