使用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运行目录的问题