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

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

本文详解为何直接用 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"> 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>

✅ 关键注意事项：

htmlppt.skill

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

下载

不要使用 toDataURL('image/pdf')：该类型不存在，必然报错；
CDN 版本一致性：避免混用不同版本的 jspdf 和 html2canvas（推荐使用 cdnjs 上的最新稳定版）；
跨域图片处理：若页面含第三方域名图片，务必设置 useCORS: true 并确保服务端配置了正确的 CORS 响应头（如 Access-Control-Allow-Origin: *）；
A4 尺寸适配：addImage() 的宽高单位需与 PDF 单位一致（本例为 mm），建议按比例缩放避免拉伸或裁剪；
错误捕获不可省略：.catch() 可定位截图失败原因（如 DOM 不可见、CSS 渲染异常、Canvas 被污染等）。