如何使用jsPDF库？解决网页转PDF生成空白文件问题

我来帮你搞定这两个关于jsPDF的问题，下面分两部分详细说明：

一、jsPDF库的基础使用方法 #

jsPDF是个很实用的前端生成PDF的库，用起来不难，基础步骤如下：

• 第一步：引入库
  可以直接用CDN在HTML里引入，方便快捷：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  

  要是你用npm管理项目，先安装：

  npm install jspdf --save
  

  之后在代码里导入：

  import { jsPDF } from "jspdf";
  

• 第二步：创建PDF并添加内容
  先来个最简单的示例，生成带文本的PDF：

  // 默认创建纵向、A4尺寸、单位为毫米的PDF
  const doc = new jsPDF();
  // 在坐标(10,10)的位置添加文本
  doc.text("你好，这是用jsPDF生成的PDF！", 10, 10);
  // 保存PDF文件
  doc.save("我的第一个PDF.pdf");
  

• 第三步：进阶操作（可选）
  要是需要更复杂的内容，比如加图片、多页面、调整字体：

  const doc = new jsPDF();
  // 添加新页面
  doc.addPage();
  // 设置字体大小为16号
  doc.setFontSize(16);
  doc.text("这是第二页的内容", 10, 10);
  // 添加图片（注意要把图片转为DataURL格式）
  doc.addImage(yourImageDataUrl, "PNG", 10, 30, 50, 50);
  doc.save("进阶版PDF.pdf");
  

二、解决生成空白PDF的问题 #

你遇到的空白PDF问题，大概率是因为用了已经被废弃的fromHTML方法，这个方法对复杂DOM的支持不太好，现在jsPDF官方推荐用html()方法替代。下面给你几个可行的修正方案：

方案1：改用新版html()方法（推荐） #

html()方法依赖html2canvas来渲染DOM，所以需要先引入这个库，代码调整后如下：

<!-- 先引入html2canvas，再引入jsPDF -->
<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>
const { jsPDF } = window.jspdf;

$('#printPDF').click(async function () {
    const doc = new jsPDF('p', 'mm', 'a4');
    try {
        // 直接传入要转换的body元素，配置位置和宽度
        await doc.html(document.body, {
            callback: function (doc) {
                doc.save('sample.pdf');
            },
            x: 15,
            y: 15,
            width: 170
        });
    } catch (error) {
        console.error('生成PDF出错啦:', error);
    }
});
</script>

注意：html()是异步方法，必须用async/await或者Promise来处理，不然可能DOM还没渲染完就生成PDF，结果就是空白。

方案2：排查旧版fromHTML的问题（不推荐，但可以试试） #

如果你一定要用fromHTML，可以检查这几点：

• 先去掉特殊元素处理的配置，测试基础情况，看看是不是#editor元素的处理出了问题：

  $('#printPDF').click(function () {
      const doc = new jsPDF();
      doc.fromHTML($('body').get(0), 15, 15, { 'width': 170 });
      doc.save('sample.pdf');
  });
  

• 检查页面里有没有动态加载的内容或者隐藏元素，fromHTML可能抓不到还没渲染好的元素，这种情况可以延迟执行：

  $('#printPDF').click(function () {
      setTimeout(() => {
          const doc = new jsPDF();
          doc.fromHTML($('body').get(0), 15, 15, { 'width': 170 });
          doc.save('sample.pdf');
      }, 500); // 延迟500毫秒，确保内容都渲染完成
  });
  

方案3：升级jsPDF版本 #

如果你用的是很老的jsPDF版本，赶紧升级到最新版，旧版本对现代前端的DOM结构支持很差，升级后很多问题会自动消失。

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