如何用JavaScript将网页指定div（resumepart）保存为PDF？

试试这个基于html2canvas和jsPDF的方案，这俩工具目前还在维护，不会轻易过时，新手也能快速上手：

完整可运行代码 #

直接把下面的代码保存成HTML文件就能测试，替换resumepart里的内容为你的实际HTML即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>导出Div为PDF</title>
  <style>
    /* 给目标Div设置A4尺寸样式，保证PDF排版规范 */
    #resumepart {
      width: 210mm;
      min-height: 297mm;
      padding: 20mm;
      background-color: #fff;
      margin: 20px auto;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <!-- 你要导出的内容容器 -->
  <div id="resumepart">
    <h1>个人简历</h1>
    <h2>基本信息</h2>
    <p>姓名：张三</p>
    <p>邮箱：zhangsan@example.com</p>
    <h2>工作经历</h2>
    <ul>
      <li>2021-至今：XX科技 前端开发工程师</li>
      <li>2019-2021：YY互联网 前端实习生</li>
    </ul>
  </div>

  <!-- 下载按钮 -->
  <button id="downloadBtn" style="display: block; margin: 0 auto; padding: 10px 20px;">Download PDF</button>

  <!-- 引入依赖工具 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

  <script>
    // 获取按钮和目标Div元素
    const downloadBtn = document.getElementById('downloadBtn');
    const resumeContainer = document.getElementById('resumepart');

    // 绑定点击事件
    downloadBtn.addEventListener('click', async () => {
      // 第一步：把Div转成Canvas画布
      const canvas = await html2canvas(resumeContainer, {
        scale: 2, // 提高分辨率，防止PDF模糊
        useCORS: true // 如果Div里有跨域图片，需要开启这个选项
      });

      // 第二步：将Canvas转成PDF
      const pdf = new jspdf.jsPDF({
        orientation: 'portrait', // 纵向排版
        unit: 'mm', // 使用毫米作为单位
        format: 'a4' // 导出A4尺寸的PDF
      });

      // 计算Canvas在PDF中的显示尺寸（保持原宽高比）
      const pdfWidth = 210; // A4宽度
      const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

      // 将Canvas图片添加到PDF中
      pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdfWidth, pdfHeight);

      // 触发下载
      pdf.save('我的简历.pdf');
    });
  </script>
</body>
</html>

新手注意事项 #

• 样式适配：给resumepart设置A4尺寸的宽高和内边距，能让导出的PDF和实际打印效果更一致，避免内容错位或截断。
• 清晰度问题：设置scale:2是为了提高Canvas的分辨率，导出的PDF会更清晰，不会出现模糊的情况。
• 跨域图片：如果你的Div里有外部网站的图片，需要确保图片服务器允许跨域访问，或者把图片下载到本地使用，否则html2canvas无法正常渲染图片。
• 分页处理：如果你的内容超过一页A4，上面的代码只会导出第一页。如果需要分页，可以后续研究pdfmake等支持HTML分页的工具，或者手动分割长内容为多个Div依次添加到PDF中。

内容的提问来源于stack exchange，提问作者DropKick