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

最新推荐文章于 2025-03-15 09:26:41 发布

深度学习机器

最新推荐文章于 2025-03-15 09:26:41 发布

阅读量1.4k

点赞数 9

分类专栏： Debug 优质项目计算机杂谈文章标签： pdf javascript 前端框架

本文链接：https://blog.csdn.net/qq_33137873/article/details/138924195

版权

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

使用npm安装pdfjs-dist库（也可以直接下载源码并引入）

npm install pdfjs-dist

导入库

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

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

let src = 'xxx.pdf';
let pageNum = 1;
let scale_ratio = 1.5;

async function renderPage() {
   
    const pdf = await pdfjsLib.getDocument(src).promise;
    const page = await pdf.getPage(pageNum);
    const viewport = page.getViewport({