Async await调用html2pdf不生效，fetch请求PDF返回404错误求助

• html2pdf的save()方法仅触发浏览器本地下载行为，生成的PDF文件只会保存在用户的本地设备中，不会上传存储到你站点的后端服务器。因此你直接通过fetch请求站点路径下的对应PDF文件时，服务器不存在该资源，自然返回404错误。
• 添加setTimeout后能正常运行属于特殊场景巧合，大概率是本地调试时存在同名缓存文件，或是你之前手动将生成的PDF放到了站点服务目录下，该逻辑不具备通用性，也不符合正常业务流程。

你不需要走「保存PDF到本地→再请求本地PDF」的冗余流程，在调用get('pdf')的回调中已经拿到了完整的jsPDF实例，直接从该实例导出你需要的内容即可。如果需要保留本地下载功能，也可以直接在回调中调用save()方法，修改后代码如下：

(async () => {
  const element = document.getElementById('canvas_div_pdf');
  const opt = {
    pagebreak: { before: '.beforeClass' },
    image: { type: 'jpeg', quality: 1 },
  };
  let pdfData;
  const timestamp = +new Date();

  await html2pdf()
    .set(opt)
    .from(element)
    .toPdf()
    .get('pdf')
    .then(function (pdf) {
      const totalPages = pdf.internal.getNumberOfPages();
      // 插入页码
      for (let i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.setTextColor(150);
        pdf.text(
          'Page ' + i + ' of ' + totalPages,
          pdf.internal.pageSize.getWidth() - 30,
          pdf.internal.pageSize.getHeight() - 10
        );
      }
      // 直接导出PDF文本内容，无需存储后再请求
      pdfData = pdf.output('text');
      // 保留原有的本地下载功能
      pdf.save(timestamp + '.pdf');
    });

  // 原fetch请求本地PDF的步骤可以完全删除
  const rawResponse = await fetch('api/pdf', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: pdfData,
  });
  const content = await rawResponse.json();
  console.log(content);
})();

如果你的业务场景确实需要先将PDF存储到服务器再请求，不要使用save()方法，应该直接将导出的PDF内容传给后端接口，由后端完成文件存储后返回可访问的线上地址，再通过该地址请求资源。

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