使用jsPDF的loadFile方法加载PDF返回空白文件的解决咨询

问题原因 #

jsPDF的loadFile方法并非用于加载完整PDF文件并直接导出，它的核心用途是加载图像、SVG等资源到新生成的空白PDF中。直接用它加载远程PDF后保存，本质上只是保存了一个未添加任何有效内容的空jsPDF实例，所以会得到空白文件。

解决方案 #

根据需求不同，有两种可靠的实现方式：

方式一：结合pdf.js渲染PDF页面到jsPDF（适合需要可视化编辑的场景） #

先通过pdf.js解析远程PDF，将每一页渲染为图片后添加到jsPDF中再导出：

async modify(fileData) {
  const url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
  
  // 1. 用pdf.js获取PDF文档实例
  const pdfDoc = await pdfjsLib.getDocument(url).promise;
  const jsPdfDoc = new jsPDF();

  // 2. 遍历每一页，渲染后添加到jsPDF
  for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
    const page = await pdfDoc.getPage(pageNum);
    // 调整缩放比例，保证渲染清晰度
    const viewport = page.getViewport({ scale: 1.5 });

    // 创建canvas用于页面渲染
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

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

    // 将canvas内容转为图片，添加到jsPDF
    const imgData = canvas.toDataURL('image/png');
    const pageWidth = jsPdfDoc.internal.pageSize.getWidth();
    const pageHeight = jsPdfDoc.internal.pageSize.getHeight();
    jsPdfDoc.addImage(imgData, 'PNG', 0, 0, pageWidth, pageHeight);
    
    // 非最后一页时添加新页面
    if (pageNum < pdfDoc.numPages) {
      jsPdfDoc.addPage();
    }
  }

  // 3. 导出处理后的PDF
  jsPdfDoc.save("pdfjs.pdf");
}

注意：需要提前引入pdf.js的依赖（比如通过CDN或本地安装）。

方式二：使用pdf-lib直接操作PDF（适合保留文本可编辑性的场景） #

pdf-lib专门用于处理现有PDF的编辑与导出，无需渲染为图片，能保留原PDF的文本可编辑属性：

async modify(fileData) {
  const url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
  
  // 1. 获取远程PDF的二进制数据
  const pdfBytes = await fetch(url).then(res => res.arrayBuffer());
  
  // 2. 加载现有PDF到pdf-lib实例
  const pdfDoc = await PDFLib.PDFDocument.load(pdfBytes);
  
  // （可选）在这里添加自定义修改操作，比如添加文本、插入页面等
  
  // 3. 导出修改后的PDF
  const modifiedPdfBytes = await pdfDoc.save();
  const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
  
  // 触发下载
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'pdfjs.pdf';
  link.click();
}

关键说明 #

你之前的代码错误地将loadFile当成了PDF导入工具，实际上它只是jsPDF的资源加载接口，无法解析和导入完整PDF结构。以上两种方式才是处理现有PDF并导出的正确路径。

内容的提问来源于stack exchange，提问作者Muhammad Akbar Lion