不可行。浏览器安全限制禁止前端JavaScript直接跨域调用PDF生成API，必须通过后端中转：前端传参数给自有后端，由后端鉴权调用PDF服务并透传PDF流，前端用Blob触发下载。

HTML 页面里直接调用 PDF 生成 API 可行吗？

不行。浏览器出于安全限制，不允许前端 JavaScript 直接跨域 POST HTML 内容到第三方 PDF 生成服务（比如 html2pdf.com、pdfshift.io 或自建的 /api/convert），除非该 API 明确支持 CORS 且允许 Content-Type: text/html，但绝大多数不开放——尤其涉及文件生成类操作时，服务端通常要求鉴权、限流、防滥用。

必须走后端中转：为什么不能跳过 server

常见错误是把整个 HTML 字符串用 fetch 发给 PDF API，结果收到 CORS error 或 403 Forbidden。真正能落地的方式是：前端传必要参数（如 HTML 片段、模板 ID、样式 URL）给自己的后端接口，由后端用 axios、requests 或 curl 调用 PDF API，并把返回的 application/pdf 流透传给前端。

• 你的后端需携带 API key（绝不能暴露在前端）
• HTML 内容若含相对路径（如 ），后端要补全为绝对 URL，否则 PDF 服务无法加载资源
• 部分 API（如 pdfshift）接受 source 字段传 HTML 字符串，但长度上限常为 10MB；超长内容建议传 source_url 指向一个可公开访问的 HTML 地址

前端怎么触发下载？别用 window.open()

后端返回 PDF 二进制流后，前端不能直接 window.open(data)——这会失败或乱码。正确做法是构造 Blob 并用 URL.createObjectURL 创建临时链接：

fetch('/api/export-pdf', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: '
Hello
' })
})
.then(res => res.blob())
.then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'document.pdf';
  a.click();
  URL.revokeObjectURL(url); // 用完立即释放
});

本地开发时容易漏掉的关键点

调试阶段

常卡在“PDF 空白”或“字体不显示”，实际多是后端没处理好渲染环境：

• 使用 wkhtmltopdf 类方案时，服务器必须安装 Xvfb 或启用无头 Chrome（puppeteer）——纯 Node.js 进程无法渲染 CSS
• 中文乱码？确认后端传给 PDF 服务的 HTML 带了 ，且字体文件路径可被 PDF 服务访问（不能是 localhost:3000/font.ttf）
• API 返回 200 但 PDF 是 0 字节？检查后端是否误将响应体当字符串处理（如用了 res.send(pdfBuffer.toString())），必须用 res.set('Content-Type', 'application/pdf').send(pdfBuffer)

真实场景里，PDF 渲染不是“调个 API 就完事”，而是涉及 HTML 结构适配、资源托管、字体嵌入、分页控制等一连串隐性依赖——别指望前端单点突破。