JavaScript实现pdf转图片

下载 PDF.js

在官网下载PDF.js预构建包，只需要build文件夹中的pdf.mjs和pdf.worker.mjs即可。

定义转换函数

在<script type="module">中导入并使用

import * as pdfjsLib from '/js/pdf.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.mjs';

// url：pdf文件地址，pageNumber：页码，scaleFactor：缩放比例(影响图片精度)
async function renderPdfToImage(url,pageNumber=1,scaleFactor=1) {
  const loadingTask = pdfjsLib.getDocument(url);
  const pdf = await loadingTask.promise;

  const page = await pdf.getPage(pageNumber);
  const viewport = page.getViewport({ scale: scaleFactor });

  // 创建一个canvas用于渲染
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  canvas.width = viewport.width;
  canvas.height = viewport.height;

  // 将PDF页面渲染到canvas上
  const renderContext = {
    canvasContext: context,
    viewport: viewport,
  };
  await page.render(renderContext).promise;

  // 将canvas转换为图片
  return canvas.toDataURL('image/png');
}

生成并下载图片

// 使用renderPdfToImage将pdf转换为图片
const imageDataUrl = await renderPdfToImage('https://example.com/example.pdf');

// 下载图片
const link = document.createElement('a');
link.href = imageDataUrl;
link.download = `pdf图片.png`; // 设置下载文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);