借助pdf.js和canvas实现pdf文件首页渲染

大家在开发过程中, 有没有遇到过这种需求
就是, 客户不想打开pdf, 鼠标悬停可以看到pdf文件的首页内容
那么这个需求, 首先可以想到的是pdf.js的getPage方法获取到首页内容, 然后再使用canvas的toDataURL获取到base64进行渲染即可
大致思路我们理清楚了, 现在我们动手写一写
首先, 需要我们安装一下依赖, 安装完成之后, 我们查看一下是否安装成功

现在需要我们将依赖进行引入
import { ref } from “vue”;
import * as pdfjsLib from “pdfjs-dist”;
引入完成之后, 我们创建一个按钮, 用于触发事件, 然后再准备一个pdf文件和用于最后转换成的响应式数据
let imgDatas = ref(“”);

获取pdf的第一页
内容整理完毕之后, 页面只有一个按钮

再此之前, 还需要我们设置一下pdf.js的worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc =
“../../../node_modules/pdfjs-dist/build/pdf.worker.mjs”;
现在需要我们先加载一下pdf文件
const loadingTask = pdfjsLib.getDocument(pdfSrc);
该方法会返回一个PDFDocumentLoadingTask实例
我们打印看下

我们通过提供的promise属性来获取一个Promise对象
const pdf = await loadingTask.promise;
随后, 我们通过getPage方法获取pdf的第一页内容
const page = await pdf.getPage(1);
console.log(page, page);
创建canvas
const canvas = document.createElement(“canvas”);
const context = canvas.getContext(“2d”);
如何设置宽高呢, 可以通过pdf.js的getViewport来获取一个viewport对象并配置缩放比例
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width;
canvas.height = viewport.height;
最后我们将pdf渲染到指定的canvas上, 并导出
await page.render({ canvasContext: context, viewport }).promise;
// 将保存为PNG格式
const imgData = canvas.toDataURL(“image/png”);
imgDatas.value = imgData;
整体我们就写完了, 我们看下效果

今天我们就讲解到这里
我们下期见