一步一步教你用 Pdf.js 把 PDF 变成 PNG 图像

项目背景

Web 开发中，我们常常会遇到需要展示 PDF 文件内容的需求。例如，你想要把 PDF 文件转化为图片，方便用户查看。在本项目中，我们使用了 Vue 3 和 Vite 这两个现代的前端开发工具，来搭建一个 Web 应用，利用 Pdf.js 将 PDF 文件转换成 PNG 图片。

什么是 Pdf.js？

Pdf.js 就像是一个 PDF 阅读器，但它不需要你安装任何插件，只要有浏览器就可以直接运行。它是 Mozilla（也就是 Firefox 浏览器的作者）开源的一个项目，目的是让开发者能够在网页上方便地展示 PDF 文件。而且，Pdf.js 还能将 PDF 文件的每一页渲染成图像，今天我们要做的就是把 PDF 转成 PNG 格式的图片，操作起来简单方便。

怎么用 Pdf.js 把 PDF 转换成 PNG 图片？

1. 准备工作：引入 Pdf.js

首先，我们要在项目中加入 Pdf.js。在 Vue 3 + Vite 环境下，安装 Pdf.js 会非常方便。我们可以直接使用 CDN 来引入 Pdf.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

或者，你可以使用 npm 安装 Pdf.js：

npm install pdfjs-dist

然后在你的组件中引入 Pdf.js：

import * as pdfjsLib from 'pdfjs-dist';

这样就可以开始使用 Pdf.js 了。

如果报错提示workerSrc 没有设置，可以这样设置：

pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${
     
     pdfjsLib.version}/pdf.worker.min.js`

2. 加载 PDF 文件

接下来，我们需要告诉 Pdf.js 要加载哪个 PDF 文件。比如，你有一个名为 document.pdf 的文件，要把它加载进来并进行处理。Pdf.js 提供了一个方法，能够将文件读取并转换成你可以操作的格式。

情况1： 处理pdf为url的情况

const url = 'path/to/your/file.pdf'; // PDF 文件路径
pdfjsLib.getDocument(url).promise.then(function(pdf) {
   
   
  console.log('PDF 文件加载成功');
  // 获取 PDF 文件的第一页
  pdf.getPage(1).then(renderPage);
});

情况2： 处理pdf为数据流的情况，例如下面举例，pdf文件数据格式，为base64的pdf数据。

 // utils.ts
  export function base64ToUint8Array(base64String: string