pdf.js预览pdf文件

情如风雪无常

使用pdf.js窗口预览pdf

一、业务场景

预览pdf一般通过浏览器自带的pdf预览器就可以，但有时候需要窗口预览或自定义操作，可以使用pdf.js操作
二、使用方法

1. 下载安装

pdf.js需要构建后使用，我们可以直接下载安装pdfjs-dist，这是构建好的版本

1. npm install pdfjs-dist

复制代码

这里注意你的环境，新版本使用了可选链，空值合并和私有 class 字段/方法等，如果你的浏览器或node版本太低，建议下载低版本的pdfjs-dist，或尝试引入leagcy文件夹下的兼容版本。
我这里是node12，安装的是@2.6.347，保险起见同样引入legacy兼容版本。
2. 引入使用【vue示例】

通过循环创建canvas来展示每一页的内容，需要考虑容器和画布的缩放比。
如果出现依赖引入和打包工具冲突的问题，可以手动把文件拷贝出来在html内直接引入，默认名称也是pdfjsLib。

1. <template>
2.   
3.    
4.       <canvas
5.         v-for="index in totalPage"
6.         :key="index"
7.         :id="`canvas-${index}`"
8.       ></canvas>
9.    
10.   
11. </template>
13. // 路径再确认下，版本不同路径可能不同
14. import pdfjsLib from 'pdfjs-dist/legacy/build/pdf.min.js'
16.     pdfjsLib
17.       .getDocument(this.pdfPath) // 你的pdf路径
18.       .promise.then((pdfDocument) => {
19.         this.totalPage = pdfDocument.numPages; // 页码
20.         for (let i = 1; i <= pdfDocument.numPages; i++) {
21.           pdfDocument.getPage(i).then((pdfPage) => {
22.             let viewport = pdfPage.getViewport({scale: 1.0});
23.             const containerWidth = document.body.offsetWidth; // 容器宽度
24.             let scaleViewport = pdfPage.getViewport({scale: containerWidth / viewport.width});
25.             let canvas = document.getElementById(`canvas-${i}`);
26.             canvas.width = viewport.width;
27.             canvas.height = viewport.height;
28.             let ctx = canvas.getContext("2d");
29.             let renderTask = pdfPage.render({
30.               canvasContext: ctx,
31.               viewport: scaleViewport,
32.             });
33.             return renderTask.promise;
34.           });
35.         }
36.       })
37.       .catch((err) => {
38.         console.log(err);
39.         console.error("PDF加载失败");
40.       });

复制代码

3. 其他问题

• 可能会出现字体缺失，部分空白问题
  
• 可能会出现worker运行目录的问题
  

来源:https://www.cnblogs.com/yuyunhao/p/17950318
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！