pdf.js

task1， 模仿helloworld，把一个最简单的pdf居中显示出来

canvas是inline元素，所以如果要居中，请设置display: block;

注意要设置pdfjsLib.GlobalWorkerOptions.workerSrc，指向dist目录下面的worker

显示pdf步骤：

1. 用pdfjsLib获取document，得到一个task

2. 在promise里面获取pdf实例

3. 由pdf实例得到某一页

4. 

viewer.html 一万多行， 我无语。

1. 切换侧栏

1.1 显示缩略图 ---》有点用

1.2 显示文档大纲 （viewOutline）----》完全不需要

1.3 显示附件（viewAttachments） ---》完全不需要

2. 在文档中查找（findbar）  ---》暂时不需要

2.1 左右

2.2 全部高亮显示

2.3 区分大小写

2.4 字词匹配

3. 上下翻页（previous, next） ---》重要

4. 直接导航到某一页(pageNumber, numPages) ---》重要

5. 放大/缩小 ---》(zoomOut)不太重要， 可以有

6. 自动缩放 ---》(zoomIn)不太重要， 可以有

7. 切换到演示模式 (secondaryPresentationMode)---》完全不需要

8. 打开本地文件 (secondaryOpenFile)---》 重要

9. 打印文件 secondaryPrint---》可以有

10. 下载 secondaryDownload---》需要会员

11. 当前在看的内容 secondaryViewBookmark---》 完全不需要

12. 滚动 scrollVertical---》重要

13. 转到第一页 firstPage---》可以有

14. 转到最后一页 lastPage---》可以有

15. 顺时针，逆时针 pageRotateCw, pageRotateCcw---》完全不需要

16. 文本选择和手形工具 cursorSelectTool, cursorHandTool---》不怎么需要

17. 水平滚动 scrollHorizontal---》完全不需要

18. 单页视图， 双页视图， 书籍视图  spreadNone, spreadOdd, spreadEven---》 不太重要，默认单页就行

19. 文档属性 documentProperties---》完全不需要

20. 在pdf上绘制 ---》重要

https://github.com/mozilla/pdf.js/issues/5608

pdf.worker.js is main file that performs PDF parsing (outside page main thread). When disableWorker=true it will be loaded into main page automatically (from workerSrc location) and block UI for PDF parsing needs. See https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L65

pdf.worker.js这个文件主要负责在另外一个线程里面解析pdf文档。如果设置disableWorker=true, pdf文档将会被加载到主页面中，因此会造成UI卡住。

https://github.com/mozilla/pdf.js/issues/1231

Looks like you are using pdf.js from the published to the web viewer which requires PDFJS.workerSrc set. Please set the PDFJS.workerSrc variable same way as published viewer does https://github.com/mozilla/pdf.js/blob/gh-pages/web/viewer.html#L14, or set PDFJS.disableWorker = true.

However best approach will be to use non-published code from 

src/*

.

要么指定workerSrc变量，要么设置disableWorker = true. 否则使用non-published版本的代码（src/*下面的文件， 默认已经设置了workerSrc）

mozilla.github.io/pdf.js

github.com/mozilla/pdf.js

上面的wiki里面的链接

csdn

stackoverflow

坑爹：

pdf.js有两个版本， 一个是专门给web上的viewer用的，需要设定workerSrc才行。

另外一个是在src内部，已经设定好了workerSrc，不需要再次设定了

https://github.com/mozilla/pdf.js/issues/1231

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

https://www.youtube.com/watch?v=1ZNeP7cjADo

只要设置canvas的宽和高, 就等于清空canvas的内容了.