pdf.js

pdf.js

原創

novodexx

2020-02-29 07:13

pdfjsLib.getDocument打開pdf文檔
pdfDoc.getPage(num).then(function(page) {

var viewport = page.getViewport({scale: scale});

由每一頁的viewport決定canvas的大小

page.render(renderContext);
page.getTextContent, 抽取pdf的文本

如果同時繪製多頁pdf, 需要特殊處理, 把它們一次鏈接起來.
https://stackoverflow.com/questions/31891907/prevent-simultanous-function-calls-when-using-pdf-js

在typescript中導入對象, 正確姿勢參考鏈接:
https://stackoverflow.com/questions/45467843/importing-pdfjs-breaks-ts-application

pdf.js, 有一層canvas, canvas下面有一層textlayer, 顏色是透明的.

如何設置oss的Accept-Ranges
阿里雲部分下載的文章:
https://help.aliyun.com/knowledge_detail/39571.html?spm=5176.11065259.1996646101.searchclickresult.63861141oYl26T
https://stackoverflow.com/questions/40620638/how-to-set-range-header-from-client-with-pdf-js

在pdf上繪製紅色四邊形:
https://stackoverflow.com/questions/58590845/draw-rectangle-in-canvas-with-loaded-pdf-file-using-pdf-js

關於workerSrc以及disableWorker = true的帖子:
https://stackoverflow.com/questions/27724295/pdf-js-failing-on-getdocument
https://github.com/mozilla/pdf.js/issues/1231

如果使用的pdf.js是發佈給web viewer使用的, 那就必須設置PDFJS.workerSrc, 如果不設置的話,
就必須設置PDFJS.disableWorker = true;

如何阻止pdf裏面的超鏈被點擊

https://stackoverflow.com/questions/31053948/how-to-disable-hyperlinks-within-a-pdf-rendered-by-pdf-js

Hello World介紹:

https://mozilla.github.io/pdf.js/examples/

hello world代碼:

https://mozilla.github.io/pdf.js/examples/

Getting Started介紹(重要!):

https://mozilla.github.io/pdf.js/getting_started/

pdf.js是顯示層, pdf.worker.js是core層, viewer.js是viewer層.

一個完整例子的視頻講解:

https://www.youtube.com/watch?v=ydCSSgwZjzs&t=542s