如何使用 html2canvas + jsPDF 正确导出 PDF 文件-html教程-PHP中文网

如何使用 html2canvas + jsPDF 正确导出 PDF 文件

本文详解为何直接用 html2canvas 生成 base64 图片并尝试以 image/pdf mime 类型触发下载会失败，并提供完整、可运行的解决方案：先用 html2canvas 截图，再通过 jspdf 将图像嵌入 pdf 并保存。

本文详解为何直接用 html2canvas 生成 base64 图片并尝试以 image/pdf mime 类型触发下载会失败，并提供完整、可运行的解决方案：先用 html2canvas 截图，再通过 jspdf 将图像嵌入 pdf 并保存。

在前端实现“一键导出为 PDF”功能时，一个常见误区是误以为 canvas.toDataURL('image/pdf') 能直接生成合法 PDF 数据——实际上，html2canvas 不支持输出 PDF 格式，仅支持 image/png 或 image/jpeg。当你传入 'image/pdf'，Canvas 会静默返回无效或空数据，导致后续 data:image/pdf;base64,... 链接无法解析，浏览器报出 “Failed - Network Error”（尤其在 Chrome 中），本质是 MIME 类型不匹配 + 数据损坏所致。

✅ 正确流程应为：

使用 html2canvas 截取目标 DOM 元素为 Canvas；
将 Canvas 转为 JPEG/PNG Data URL（推荐 'image/jpeg'，体积更小）；
初始化 jsPDF 实例，调用 .addImage() 将图像插入 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 全局可用（UMD 模块需显式挂载）
  const { jsPDF } = window.jspdf;

  function screenshotAndDownload() {
    const form = document.querySelector('.container-fluid.row');

    // 添加加载状态提示（可选但推荐）
    const btn = document.getElementById('downloadBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split"> Generating...';

    html2canvas(form, {
      useCORS: true,        // 允许跨域图片（如 CDN 资源）
      scale: 2,             // 提升截图清晰度（适配高 DPI 屏幕）
      logging: false        // 生产环境建议关闭日志
    }).then((canvas) => {
      // 创建 A4 纵向 PDF（单位 mm，宽210×高297）
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgData = canvas.toDataURL('image/jpeg', 0.95); // JPEG 质量 95%

      // 自动缩放图像以填满 A4 页面（保持宽高比）
      const imgWidth = 210;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;

      // 若内容过高，可分页处理（此处简化为单页；复杂布局建议用 autoTable 插件）
      pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
      pdf.save('child_information.pdf');

    }).catch((error) => {
      console.error('PDF generation failed:', error);
      alert('Failed to generate PDF. Please check console for details.');
    }).finally(() => {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-download"> Download as PDF';
    });
  }

  document.getElementById('downloadBtn').addEventListener('click', screenshotAndDownload);
</script>

? 关键注意事项：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

✅ 不要手动构造 data:image/pdf;base64,... 链接：downloadBase64File 函数在此场景下完全冗余且易错，jsPDF.save() 已封装标准下载逻辑；
✅ 务必使用 jsPDF 官方推荐的 UMD 入口：window.jspdf.jsPDF 在新版中已弃用，应通过解构 const { jsPDF } = window.jspdf 获取；
✅ 启用 useCORS: true：避免因跨域图片（如图标、头像）导致截图空白；
⚠️ A4 尺寸适配：addImage() 的宽高参数需按实际需求计算，否则图像可能被裁剪或留白过多；
? 避免 image/pdf 伪 MIME：Canvas 不支持该类型，强制使用将返回空字符串，导致下载失败。

? 进阶建议：

对于含表格、长文本或分页需求，推荐结合 jspdf-autotable 插件生成结构化 PDF；
如需保留原始 HTML 样式（如 CSS 变量、阴影、渐变），可在 html2canvas 选项中添加 ignoreElements: (el) => el.classList.contains('no-print') 进行精细控制。

遵循上述方案，即可稳定实现高质量、无报错的前端 PDF 导出功能。