本文详解为何直接用 canvas.toDataURL('image/pdf') 会导致“Failed - Network Error”，并提供完整、可运行的解决方案：先用 html2canvas 截图生成图像，再通过 jsPDF 将其嵌入标准 PDF 容器并保存。
本文详解为何直接用 `canvas.todataurl('image/pdf')` 会导致“failed - network error”，并提供完整、可运行的解决方案：先用 html2canvas 截图生成图像，再通过 jspdf 将其嵌入标准 pdf 容器并保存。
在前端实现网页内容导出为 PDF 时，一个常见误区是误以为 html2canvas 可直接输出 PDF 格式数据（如调用 canvas.toDataURL('image/pdf')）。实际上，html2canvas 仅支持生成位图格式（如 'image/png' 或 'image/jpeg'），不支持 'image/pdf' —— 该 MIME 类型根本无效，浏览器无法解析，最终触发下载失败的网络错误。
正确流程应为两步：
- 使用 html2canvas 渲染目标 DOM 元素为
- 利用 jsPDF 实例将该图像添加至 PDF 页面，并调用 .save() 触发原生下载。
以下是经过验证的完整实现代码（已优化兼容性与可维护性）：
<div class="container-fluid row">
<div class="col-md-12">
<button class="btn btn-success" id="downloadBtn">
<i class="bi bi-download"></i> Download as PDF
</button>
</div>
</div>
<!-- 推荐使用稳定 CDN 链接 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
// 确保 jsPDF 在全局作用域可用（v2.x+ 已默认导出为模块，无需手动赋值 window.jsPDF）
const { jsPDF } = window.jspdf;
function screenshotAndDownload() {
const targetElement = document.querySelector('.container-fluid.row');
// 添加加载状态提示（可选，提升用户体验）
const btn = document.getElementById('downloadBtn');
const originalText = btn.innerHTML;
btn.innerHTML = '<i class="bi bi-hourglass"></i> Generating...';
btn.disabled = true;
html2canvas(targetElement, {
useCORS: true, // 允许跨域资源（如图片）被截取
scale: 2, // 提升截图清晰度（适配高清屏）
logging: false // 生产环境建议关闭日志
}).then(canvas => {
// 创建 A4 纵向 PDF（210mm × 297mm）
const pdf = new jsPDF('p', 'mm', 'a4');
const imgData = canvas.toDataURL('image/jpeg', 0.95); // 高质量 JPEG
// 自动缩放图像以适配 A4 页面（保持宽高比）
const imgWidth = 210;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
// 若内容过高，可启用多页逻辑（此处为单页简化版）
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
pdf.save('child_information.pdf');
// 恢复按钮状态
btn.innerHTML = originalText;
btn.disabled = false;
}).catch(err => {
console.error('PDF generation failed:', err);
alert('Failed to generate PDF. Please check console for details.');
btn.innerHTML = originalText;
btn.disabled = false;
});
}
document.getElementById('downloadBtn').addEventListener('click', screenshotAndDownload);
</script>✅ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要使用 toDataURL('image/pdf')：该类型不存在，必然报错；
- CDN 版本一致性：避免混用不同版本的 jspdf 和 html2canvas（推荐使用 cdnjs 上的最新稳定版）；
- 跨域图片处理：若页面含第三方域名图片，务必设置 useCORS: true 并确保服务端配置了正确的 CORS 响应头（如 Access-Control-Allow-Origin: *）；
- A4 尺寸适配：addImage() 的宽高单位需与 PDF 单位一致（本例为 mm），建议按比例缩放避免拉伸或裁剪；
- 错误捕获不可省略：.catch() 可定位截图失败原因（如 DOM 不可见、CSS 渲染异常、Canvas 被污染等）。
? 进阶提示：如需导出长页面（高度 > A4），可结合 pdf.internal.pageSize.getHeight() 分页拼接；若需保留文本可搜索性或矢量样式，建议改用 @react-pdf/renderer 或服务端渲染方案。
遵循上述实践，即可稳定实现高质量网页 PDF 导出，彻底规避“Failed - Network Error”。
