不可行。浏览器安全限制禁止前端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 内容若含相对路径（如
- 部分 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 结构适配、资源托管、字体嵌入、分页控制等一连串隐性依赖——别指望前端单点突破。
