JavaScript中调用window.print()后如何将生成的PDF上传到数据库

浏览器原生window.print()接口仅能调用系统打印能力，无法直接捕获输出的PDF文件流，因此需要改用前端生成PDF的方案，复用你已完成的发票样式，生成PDF后直接上传，具体实现步骤如下： #

1. 依赖引入（纯前端实现，无需后端支持） #

使用业界通用的html2canvas + jsPDF组合实现DOM转PDF，完全兼容你已经开发完成的发票样式，你可以直接下载JS文件到本地引入，无需依赖包管理工具：

<script src="./html2canvas.min.js"></script>
<script src="./jspdf.umd.min.js"></script>

注：如果要求完全不引入第三方库，当前浏览器原生API没有拦截打印流的能力，无法实现自动捕获打印PDF上传的需求。

2. 发票DOM转PDF文件流 #

示例代码如下，参数可直接复用你已配置的打印规则（纸张大小、边距、分页逻辑等），保证生成的PDF与打印效果完全一致：

async function getInvoicePDFBlob() {
  // 替换为你实际的发票DOM节点ID
  const invoiceDom = document.querySelector('#invoice-wrapper');
  // DOM转画布，保证样式还原度
  const canvas = await html2canvas(invoiceDom, {
    scale: 2, // 提高分辨率避免内容模糊
    useCORS: true, // 发票含外部图片资源时需开启
    logging: false
  });
  // A4纸张参数，可根据你的打印配置修改
  const A4_WIDTH_MM = 210;
  const A4_HEIGHT_MM = 297;
  const imgHeight = (canvas.height * A4_WIDTH_MM) / canvas.width;
  let remainingHeight = imgHeight;
  let position = 0;
  // 初始化PDF实例
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF('p', 'mm', 'a4');
  // 写入内容，自动处理分页
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, A4_WIDTH_MM, imgHeight);
  remainingHeight -= A4_HEIGHT_MM;
  while (remainingHeight >= 0) {
    position = remainingHeight - imgHeight;
    pdf.addPage();
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, A4_WIDTH_MM, imgHeight);
    remainingHeight -= A4_HEIGHT_MM;
  }
  // 返回PDF Blob流用于上传
  return pdf.output('blob');
}

3. 上传PDF到后端存储到数据库 #

使用原生Fetch API构造上传请求，无需额外框架：

async function uploadInvoice() {
  try {
    const pdfBlob = await getInvoicePDFBlob();
    const formData = new FormData();
    // 附加PDF文件，文件名可按业务规则自定义（比如绑定订单号、发票号）
    formData.append('invoice_pdf', pdfBlob, `invoice_${new Date().getTime()}.pdf`);
    // 可附加其他业务参数，比如发票ID、所属订单号等
    formData.append('invoice_id', '你的业务唯一标识');
    // 发送请求，替换为你的实际后端接口地址
    const uploadRes = await fetch('/api/invoice/upload', {
      method: 'POST',
      body: formData,
      // 如有身份鉴权需求可补充请求头
      // headers: { 'Authorization': 'Bearer 你的鉴权token' }
    });
    const result = await uploadRes.json();
    if (result.success) {
      console.log('发票PDF上传成功');
      // 上传完成后可按需触发原打印逻辑
      // window.print();
    }
  } catch (err) {
    console.error('发票处理失败：', err);
  }
}

注意事项 #

• 生成PDF的配置参数需要和你之前写的打印CSS规则完全对齐，避免出现内容偏移、分页不一致的问题
• 如果发票包含自定义字体、特殊符号，需要提前在html2canvas配置中引入对应字体，保证样式还原
• 后端接收到文件流后，可直接以二进制Blob格式存储到数据库，也可存储到对象存储后将访问地址存入数据库，按你的业务需求选择即可

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