使用jsPDF-html2canvas能否调用.output('datauri')替代.save()？

你遇到的pdf.output('datauri')打开空白页面的问题，是因为该方法会自动尝试在新窗口打开生成的data URI，而浏览器出于安全策略拦截了这个操作，导致出现about:blank#blocked页面。

解决方法很简单，改用其他输出格式获取数据，而非直接触发页面跳转：

• 获取data URI字符串：使用pdf.output('datauristring')替代datauri，它会返回纯字符串格式的data URI，不会自动打开新页面，你可以直接用这个字符串通过fetch发送到API：

// 生成pdf后执行
const pdfDataUri = pdf.output('datauristring');

// 发送到API作为邮件附件
fetch('/your-mail-api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    attachment: pdfDataUri,
    subject: '你的邮件主题',
    to: 'recipient@example.com'
  })
});

• 获取Blob对象：如果API更适合接收文件Blob，可以用pdf.output('blob')生成Blob后，通过FormData发送：

const pdfBlob = pdf.output('blob');
const formData = new FormData();
formData.append('attachment', pdfBlob, 'generated-document.pdf');

fetch('/your-mail-api', {
  method: 'POST',
  body: formData
});

直接使用html2canvas+jsPDF时没问题，是因为你完全控制了pdf实例的输出流程，没有封装层的额外操作；而jsPDF-html2canvas的内部逻辑中，调用output('datauri')会触发浏览器的弹出行为，从而被拦截。

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