Node.js环境下生成的单页PDF如何无需Ghostscript等工具转为图片？

结论 #

可以不用安装Ghostscript等系统级额外依赖，优先选择前端侧转换方案，完全不需要修改现有服务端PDF生成逻辑，适配成本极低，非常适合开发新手。

推荐实现方案（前端转换） #

利用浏览器原生Canvas能力，配合Mozilla官方维护的纯JS PDF处理库pdfjs-dist完成转换，无任何系统级依赖，仅需安装前端npm包即可。

实现步骤 #

1. 安装依赖

npm install pdfjs-dist

2. 修改现有React端逻辑，拿到PDF blob后同时支持下载PDF、转图片下载两个选项，无需直接打开新标签页：

import * as pdfjsLib from 'pdfjs-dist';
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

const handleSubmit = async (e) => {
  // 原有发送请求逻辑不变
  fetch("http://localhost:5050/generate-rx", { 
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: parsed
  })
  .then(async res => {
    if (res.status === 200) {
      const blob = await res.blob();
      // 1. 下载PDF的逻辑
      const downloadPdf = () => {
        const fileURL = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = fileURL;
        a.download = '处方.pdf';
        a.click();
        URL.revokeObjectURL(fileURL);
      };
      // 2. 转图片并下载的逻辑
      const downloadAsImage = async () => {
        const arrayBuffer = await blob.arrayBuffer();
        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
        // 取第一页（你的需求是单页PDF）
        const page = await pdf.getPage(1);
        // 自定义分辨率，数值越高图片越清晰
        const scale = 2.0;
        const viewport = page.getViewport({ scale: scale });
        // 创建canvas绘制
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise;
        // 转成png下载
        canvas.toBlob((imgBlob) => {
          const imgUrl = URL.createObjectURL(imgBlob);
          const a = document.createElement('a');
          a.href = imgUrl;
          a.download = '处方.png';
          a.click();
          URL.revokeObjectURL(imgUrl);
        }, 'image/png');
      };
      // 这里可以自行扩展弹窗、操作按钮让用户选择触发对应下载逻辑即可
      console.log('可选择下载格式：', {downloadPdf, downloadAsImage});
    }
  }) 
}

其他可选方案 #

如果必须在服务端完成转换，也可以选择pdfjs-dist配合node-canvas库实现，同样不需要安装Ghostscript，仅需安装npm依赖即可，缺点是服务端环境配置相比前端方案稍复杂，新手优先选择前端转换方案。

内容的提问来源于stack exchange，提问作者orangesheep