使用pdf.js窗口预览pdf

一、业务场景

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

二、使用方法

1. 下载安装

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

npm install pdfjs-dist

这里注意你的环境，新版本使用了可选链，空值合并和私有 class 字段/方法等，如果你的浏览器或node版本太低，建议下载低版本的pdfjs-dist，或尝试引入leagcy文件夹下的兼容版本。

我这里是node12，安装的是@2.6.347，保险起见同样引入legacy兼容版本。

2. 引入使用【vue示例】

通过循环创建canvas来展示每一页的内容，需要考虑容器和画布的缩放比。

如果出现依赖引入和打包工具冲突的问题，可以手动把文件拷贝出来在html内直接引入，默认名称也是pdfjsLib。

<template>
 <div id="app">
 <div class="pdf-container">
 <canvas
 v-for="index in totalPage"
 :key="index"
 :id="`canvas-${index}`"
 ></canvas>
 </div>
 </div>
</template>
// 路径再确认下，版本不同路径可能不同
import pdfjsLib from 'pdfjs-dist/legacy/build/pdf.min.js'
 pdfjsLib
 .getDocument(this.pdfPath) // 你的pdf路径
 .promise.then((pdfDocument) => {
 this.totalPage = pdfDocument.numPages; // 页码
 for (let i = 1; i <= pdfDocument.numPages; i++) {
 pdfDocument.getPage(i).then((pdfPage) => {
 let viewport = pdfPage.getViewport({scale: 1.0});
 const containerWidth = document.body.offsetWidth; // 容器宽度
 let scaleViewport = pdfPage.getViewport({scale: containerWidth / viewport.width});
 let canvas = document.getElementById(`canvas-${i}`);
 canvas.width = viewport.width;
 canvas.height = viewport.height;
 let ctx = canvas.getContext("2d");
 let renderTask = pdfPage.render({
 canvasContext: ctx,
 viewport: scaleViewport,
 });
 return renderTask.promise;
 });
 }
 })
 .catch((err) => {
 console.log(err);
 console.error("PDF加载失败");
 });

3. 其他问题

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