如何将window.print()生成的带样式PDF通过Ajax上传至服务端且不使用jsPDF

方案1：前端结合无头浏览器本地生成PDF（前端侧实现，和window.print效果100%一致） #

核心逻辑是用本地运行的无头浏览器实例打开当前页面，调用内置打印接口生成PDF二进制流，直接拿到文件对象后上传即可，渲染逻辑和原生window.print()完全一致。

• 适用场景：桌面端应用、内部工具类项目，可要求用户使用Chrome/Edge浏览器、或预安装Electron客户端的场景
• 实现步骤：
  1. 如果是Electron封装的项目，直接调用webContents.printToPDF()接口，渲染效果和系统Chrome完全对齐
  2. 拿到返回的PDF Buffer后转成Blob对象，构造FormData请求体
  3. 正常发起Ajax/axios请求上传到服务端即可
• 代码示例片段：

// Electron环境下的实现代码
const { webContents } = require('@electron/remote')
const axios = require('axios')

async function printAndUpload() {
  // 生成PDF，参数和浏览器打印设置完全匹配
  const pdfBuffer = await webContents.getCurrentWebContents().printToPDF({
    landscape: false,
    printBackground: true, // 保留背景样式，是jsPDF无法实现的核心能力
    pageSize: 'A4',
    margins: {
      marginType: 'printableArea'
    }
  })
  // 构造表单数据上传
  const formData = new FormData()
  formData.append('pdfFile', new Blob([pdfBuffer], { type: 'application/pdf' }), 'print_output.pdf')
  await axios.post('/你的服务端上传接口地址', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  })
}

方案2：服务端无头浏览器渲染生成PDF（跨端通用，无浏览器限制） #

核心逻辑是前端把当前页面完整的渲染结果（包含所有动态内容、样式）传给服务端，服务端用Puppeteer/Playwright启动无头浏览器渲染页面后生成PDF，效果和前端window.print()完全一致。

• 适用场景：公网用户使用的Web项目，无法限制用户浏览器类型的场景
• 实现步骤：
  1. 前端获取当前页面完整HTML内容：const fullHtml = document.documentElement.outerHTML
  2. 将HTML内容、打印配置（纸张尺寸、是否打印背景、边距参数等）通过Ajax传给服务端
  3. 服务端接收到HTML后，用Puppeteer新建页面，写入HTML内容后调用page.pdf()方法生成PDF文件
  4. 服务端可直接存储PDF，也可将文件流返回给前端做后续处理
• 注意点：如果页面包含需要授权才能访问的资源（图片、字体等），服务端请求时需要携带对应Cookie或授权凭证，保证资源正常加载。

方案3：Chrome扩展API实现（面向Chrome/Edge用户的Web项目） #

如果你的项目仅面向Chrome内核浏览器用户，可以开发轻量扩展引导用户安装，调用chrome.printingAPI拦截打印任务，直接拿到PDF文件流后上传，用户操作和普通打印流程无差异。

注意：所有方案的核心都是调用Chromium内核的原生打印能力，这是唯一能保证和window.print()输出PDF样式完全一致的实现方式，jsPDF因为是自研排版逻辑，对复杂CSS（grid、flex、自定义字体、打印分页规则、背景样式）的支持和原生浏览器有明显差异，无法满足高还原度需求。

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