记使用pdf.js过程遇到的坑

大前锋

最近项目中需要用到js库来渲染pdf文件，调研后发现无论是reach-pdf.js或者是svelte-pdf.js都是在pdf.js基础上做了些许精简，反而功能还不如原始的pdf.js来得全面。但是原始的库几乎没有像样的代码示例，而能搜索到的大多数代码不少都是十几年前的了，在这个过程中踩了不少坑，做个记录，希望对看到的人有所帮助。
使用npm安装pdfjs-dist库（也可以直接下载源码并引入）

1. npm install pdfjs-dist

复制代码

导入库

1. // 网上很多代码都是import xxx from 'pdfjs-dist';
2. // 而xxx一般都是过期或者不存在的，直接把所有导出为pdfjslib即可
3. import * as pdfjslib from 'pdfjs-dist';
4. // 注意需要设置这个参数
5. pdfjslib.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';

复制代码

单页渲染，多页渲染在下面代码基础上直接添加一个循环即可

1. let src = 'xxx.pdf';
2. let pageNum = 1;
3. let scale_ratio = 1.5;
5. async function renderPage() {
6.     const pdf = await pdfjsLib.getDocument(src).promise;
7.     const page = await pdf.getPage(pageNum);
8.     const viewport = page.getViewport({ scale: scale_ratio });
10.     const canvas = document.createElement('canvas');
11.     const context = canvas.getContext('2d');
13.     canvas.height = viewport.height;
14.     canvas.width = viewport.width;
16.     const renderContext = {
17.       canvasContext: context,
18.       viewport: viewport
19.     };
20.     await page.render(renderContext);
22.   }

复制代码

注意渲染完的pdf只有图片形式，使用开发者工具看网页的结构只有canvas组件，想要实现文字的选择和复制还需要在上面渲染一层文字层。
[code]// 需要引入样式文件，不然文字不会悬浮在cavas组件上import 'pdfjs-dist/web/pdf_viewer.css';async function renderFullPage(){        const pdf = await pdfjsLib.getDocument(src).promise;        const pdfContainer = document.createElement('div');        pdfContainer.style.setProperty('--scale-factor', scale_ratio);        for (let i=1; i