如何用js实现pdf文件转图片

有个教师朋友问我要个免费的pdf转图片工具，说以前用的smallPDF这些工具没有免费额度了。这么简单的功能，居然还好意思收费，看我这十年程序猿老猿怎么断了你的财路。。。

开个玩笑而已，别当真。。。

pdf转图片有很多开源框架可以用，使用最多的就是pdfjs库。以下是一个基本的实现示例：

// 引入pdf.js库
import pdfjsLib from 'pdfjs-dist';

// 定义函数，将pdf转成图片
async function convertPdfToImage(pdfUrl) {
  const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  
  // 循环遍历每一页pdf，将其转成图片
  for (let i = 1; i <= pdf._pdfInfo.numPages; i++) {
    // 获取pdf页
    const page = await pdf.getPage(i);

    // 获取页的尺寸
    const viewport = page.getViewport({ scale: 1 });

    // 设置canvas的尺寸
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 将pdf页渲染到canvas上
    await page.render({ canvasContext: context, viewport: viewport }).promise;

    // 将canvas转成图片，并添加到页面上
    const img = document.createElement('img');
    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);
  }
}

// 调用函数，将pdf转成图片
const pdfUrl = 'https://example.com/pdf-file.pdf';
convertPdfToImage(pdfUrl);

注意：以上示例仅为参考，并未考虑所有情况。在实际应用中，可能需要针对具体情境进行调整和完善。

---

2023-03-13 更新：

这两天看搜索此类文章的人还是挺多的，所以我整理了一个简单的DEMO，方便大家直接测试和使用。

DEMO地址：https://www.mulianju.com/demos/pdf-to-image/

本文永久链接: https://www.mulianju.com/pdf-to-image/