解决jsPDF下载空文件问题：HTML表格转换为PDF的正确姿势

---

本文旨在解决使用jspdf库将动态生成的html表格下载为pdf时文件内容为空的问题。核心解决方案是利用`html2canvas`库将html元素转换为图像，然后将该图像添加到jspdf文档中，从而确保生成的pdf文件包含完整的表格内容。文章将详细阐述实现步骤、提供完整代码示例及注意事项，帮助开发者准确生成包含html内容的pdf文件。

问题背景与常见误区

在前端开发中，将页面上的HTML内容导出为PDF是常见的需求。jsPDF是一个流行的J*aScript库，用于在客户端生成PDF文件。然而，许多开发者在使用jsPDF尝试将复杂的HTML结构（如表格）转换为PDF时，可能会遇到生成的PDF文件为空白页的问题。

原始代码中尝试使用doc.html(content)方法直接将HTML字符串添加到PDF。虽然jsPDF在某些版本中提供了类似的html()方法，但它通常依赖于html2canvas或特定的DOM解析能力，并且对于动态生成或复杂样式的HTML内容，其兼容性和渲染效果可能不尽如人意，甚至可能导致内容无法正确渲染而出现空白文件。

解决此问题的关键在于理解jsPDF如何处理HTML内容。最可靠的方法是将HTML元素“渲染”成一个图像，然后将这个图像插入到PDF文档中。html2canvas库正是为此目的而生，它可以将任何HTML元素渲染到Canvas上，我们再将Canvas内容转换为图片数据，供jsPDF使用。

解决方案：结合 html2canvas 与 jsPDF

本教程将指导您如何结合使用html2canvas和jsPDF，将动态生成的HTML表格正确地导出为PDF文件。

1. 引入必要的库

确保您的HTML文件中正确引入了jsPDF和html2canvas库。dompurify库虽然在原始代码中出现，但对于本示例的HTML转图片再转PDF的流程并非必需，您可以根据实际安全需求决定是否保留。

<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>
<!-- dompurify 并非必需，但可用于HTML内容净化 -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.1/purify.min.js"></script> -->

2. HTML 结构与样式

页面需要一个用户输入框来决定生成表格的数量，以及两个按钮分别用于生成表格和下载PDF。生成的表格将放置在一个div容器中。

MarketingBlocks AI

AI营销助理，快速创建所有的营销物料。

27 查看详情

<h1>Tabelas de Bingo</h1>
<label for="repeticoes">Número de Repetições:</label>
<input type="number" id="repeticoes" value="3">
<button onclick="criarTabelas()">Gerar Tabelas</button>
<button onclick="CriaPDF()">Baixar PDF</button>
<div id="container"></div>

为表格添加一些基本样式，以确保在页面上和PDF中都有良好的视觉效果。

table {
  width: 700px;
  height: 500px;
  font: 17px Calibri;
  margin-bottom: 20px;
}

table,
th,
td {
  border: solid 1px #DDD;
  border-collapse: collapse;
  padding: 2px 3px;
  text-align: center;
}

3. J*aScript 核心逻辑

3.1 动态生成表格 (criarTabelas)

这部分代码负责根据用户输入的数字动态生成多个“宾果”表格。每个表格包含随机生成的基因组合。这部分功能在原始代码中已经正确实现。

window.jsPDF = window.jspdf.jsPDF; // 确保jsPDF全局可用

// 基因组合数据
var combinacoes1 = ["UUU", "UUC", "UUA", "UUG", "UCU", "UCC", "UCA", "UCG", "UAU", "UAC", "UAA", "UAG", "UGU", "UGC", "UGA", "UGG"];
var combinacoes2 = ["CUU", "CUC", "CUA", "CUG", "CCU", "CCC", "CCA", "CCG", "CAU", "CAC", "CAA", "CAG", "CGU", "CGC", "CGA", "CGG"];
var combinacoes3 = ["AUU", "AUC", "AUA", "AUG", "ACU", "ACC", "ACA", "ACG", "AAU", "AAC", "AAA", "AAG", "AGU", "AGC", "AGA", "AGG"];
var combinacoes4 = ["GUU", "GUC", "GUA", "GUG", "GCU", "GCC", "GCA", "GCG", "GAU", "GAC", "GAA", "GAG", "GGU", "GGC", "GGA", "GGG"];

// 从给定数组中随机生成4个不重复的值
function gerarValorAleatorio(valores) {
  var temp = valores.slice();
  var valoresAleatorios = [];

  for (var i = 0; i < 4; i++) {
    var indice = Math.floor(Math.random() * temp.length);
    valoresAleatorios.push(temp[indice]);
    temp.splice(indice, 1);
  }
  return valoresAleatorios;
}

// 根据用户输入生成指定数量的表格
function criarTabelas() {
  var container = document.getElementById("container");
  container.innerHTML = ""; // 清除之前的内容

  var repeticoes = parseInt(document.getElementById("repeticoes").value, 10) || 0;

  for (var i = 0; i < repeticoes; i++) {
    var div = document.createElement("div");
    div.className = "tabelaBingo"; // 添加类名以便后续选择
    var tabela = document.createElement("table");
    tabela.innerHTML = "<caption>Tabela de Bingo de Genes " + (i + 1) + "</caption>";

    for (var j = 0; j < 4; j++) {
      var resultados;
      if (j === 0) {
        resultados = gerarValorAleatorio(combinacoes1);
      } else if (j === 1) {
        resultados = gerarValorAleatorio(combinacoes2);
      } else if (j === 2) {
        resultados = gerarValorAleatorio(combinacoes3);
      } else if (j === 3) {
        resultados = gerarValorAleatorio(combinacoes4);
      }

      var tr = document.createElement("tr");
      tabela.appendChild(tr);
      for (var k = 0; k < 4; k++) {
        var valor = resultados[k];
        var td = document.createElement("td");
        td.textContent = valor;
        tr.appendChild(td);
      }
    }
    div.appendChild(tabela);
    container.appendChild(div);
  }
}

3.2 下载 PDF (CriaPDF) - 核心修复

这是解决问题的关键部分。我们将遍历所有生成的表格，使用html2canvas将每个表格渲染为Canvas图像，然后将图像添加到独立的jsPDF文档中。

function CriaPDF() {
  var tabelaBingo = document.getElementsByClassName("tabelaBingo");
  var promises = []; // 用于存储每个表格转换为图片的Promise

  for (let i = 0; i < tabelaBingo.length; i++) { // 使用let确保i在每次循环中独立
    var tabela = tabelaBingo[i];

    // 使用html2canvas将表格元素渲染为canvas
    var promise = html2canvas(tabela, {
      scale: 2 // 提高渲染质量，避免图片模糊
    }).then(function (canvas) {
      var imgData = canvas.toDataURL("image/png"); // 将canvas内容转换为PNG图片数据

      var doc = new jsPDF('p', 'mm', 'a4'); // 创建一个新的PDF文档，A4大小
      var imgWidth = 210; // A4页面的宽度 (mm)
      // 根据图片原始宽高比计算图片在PDF中的高度，确保图片不变形
      var imgHeight = canvas.height * imgWidth / canvas.width;

      // 如果图片高度超过A4页面高度，则进行分页处理（简单示例，实际应用可能需要更复杂的逻辑）
      let position = 0;
      let heightLeft = imgHeight;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= doc.internal.pageSize.getHeight();

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= doc.internal.pageSize.getHeight();
      }

      // 保存PDF文件
      doc.s*e("bingo" + (i + 1) + ".pdf");
    });
    promises.push(promise);
  }

  // 等待所有PDF生成完成后执行回调
  Promise.all(promises).then(function () {
    console.log("所有PDF已成功生成并下载。");
  }).catch(function(error) {
    console.error("生成PDF时发生错误:", error);
  });
}

4. 完整代码示例

将上述HTML、CSS和J*aScript代码整合到一个文件中，即可运行。

 
 
 
 




<h1>Tabelas de Bingo</h1>
<label for="repeticoes">Número de Repetições:</label>
<input type="number" id="repeticoes" value="3">
<button onclick="criarTabelas()">Gerar Tabelas</button>
<button onclick="CriaPDF()">Baixar PDF</button>
<div id="container"></div>

<script>
 window.jsPDF = window.jspdf.jsPDF;

 // 基因组合数据 (与上面相同，此处省略以保持简洁)
 var combinacoes1 = ["UUU", "UUC", "UUA", "UUG", "UCU", "UCC", "UCA", "UCG", "UAU", "UAC", "UAA", "UAG", "UGU", "UGC", "UGA", "UGG"];
 var combinacoes2 = ["CUU", "CUC", "CUA", "CUG", "CCU", "CCC", "CCA", "CCG", "CAU", "CAC", "CAA", "CAG", "CGU", "CGC", "CGA", "CGG"];
 var combinacoes3 = ["AUU", "AUC", "AUA", "AUG", "ACU", "ACC", "ACA", "ACG", "AAU", "AAC", "AAA", "AAG", "AGU", "AGC", "AGA", "AGG"];
 var combinacoes4 = ["GUU", "GUC", "GUA", "GUG", "GCU", "GCC", "GCA", "GCG", "GAU", "GAC", "GAA", "GAG", "GGU", "GGC", "GGA", "GGG"];

 function gerarValorAleatorio(valores) {
     var temp = valores.slice();
     var valoresAleatorios = [];
     for (var i = 0; i < 4; i++) {
         var indice = Math.floor(Math.random() * temp.length);
         valoresAleatorios.push(temp[indice]);
         temp.splice(indice, 1);
     }
     return valoresAleatorios;
 }

 function criarTabelas() {
     var container = document.getElementById("container");
     container.innerHTML = "";
     var repeticoes = parseInt(document.getElementById("repeticoes").value, 10) || 0;
     for (var i = 0; i < repeticoes; i++) {
         var div = document.createElement("div");
         div.className = "tabelaBingo";
         var tabela = document.createElement("table");
         tabela.innerHTML = "<caption>Tabela de Bingo de Genes " + (i + 1) + "</caption>";
         for (var j = 0; j < 4; j++) {
             var resultados;
             if (j === 0) resultados = gerarValorAleatorio(combinacoes1);
             else if (j === 1) resultados = gerarValorAleatorio(combinacoes2);
             else if (j === 2) resultados = gerarValorAleatorio(combinacoes3);
             else if (j === 3) resultados = gerarValorAleatorio(combinacoes4);
             var tr = document.createElement("tr");
             tabela.appendChild(tr);
             for (var k = 0; k < 4; k++) {
                 var td = document.createElement("td");
                 td.textContent = resultados[k];
                 tr.appendChild(td);
             }
         }
         div.appendChild(tabela);
         container.appendChild(div);
     }
 }

 function CriaPDF() {
     var tabelaBingo = document.getElementsByClassName("tabelaBingo");
     var promises = [];

     for (let i = 0; i < tabelaBingo.length; i++) {
         var tabela = tabelaBingo[i];
         var promise = html2canvas(tabela, {
           scale: 2 // 提高渲染质量
         }).then(function (canvas) {
             var imgData = canvas.toDataURL("image/png");
             var doc = new jsPDF('p', 'mm', 'a4');
             var imgWidth = 210;
             var imgHeight = canvas.height * imgWidth / canvas.width;

             let position = 0;
             let heightLeft = imgHeight;

             doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
             heightLeft -= doc.internal.pageSize.getHeight();

             while (heightLeft >= 0) {
               position = heightLeft - imgHeight;
               doc.addPage();
               doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
               heightLeft -= doc.internal.pageSize.getHeight();
             }

             doc.s*e("bingo" + (i + 1) + ".pdf");
         });
         promises.push(promise);
     }

     Promise.all(promises).then(function () {
         console.log("所有PDF已成功生成并下载。");
     }).catch(function(error) {
         console.error("生成PDF时发生错误:", error);
     });
 }
</script>

注意事项与最佳实践

1. 异步操作处理： html2canvas是一个异步函数，它返回一个Promise。当您需要处理多个元素（如本例中的多个表格）时，必须使用Promise.all()来确保所有渲染操作完成后再执行后续逻辑，或者在每个Promise内部处理其PDF生成和保存。本示例已采用Promise.all来管理多个PDF的生成。
2. 图片质量与文件大小： html2canvas的scale选项可以提高生成图像的清晰度。较高的scale值会生成更高分辨率的图片，从而在PDF中显示更清晰，但也会增加PDF文件的大小。您需要根据实际需求在质量和文件大小之间进行权衡。
3. 图片定位与分页： doc.addImage()方法允许您指定图片在PDF页面上的位置和尺寸。如果HTML内容过长，超出了单个PDF页面的高度，您需要实现分页逻辑。本示例提供了一个简单的分页处理，通过计算剩余高度并添加新页面来放置图片。对于更复杂的布局，可能需要更精细的计算和多页处理。
4. CSS样式支持： html2canvas会尽力模拟浏览器渲染HTML元素时的CSS样式。然而，并非所有CSS属性都能完美支持，特别是复杂的CSS动画、伪元素或某些高级布局。在遇到渲染问题时，可以尝试简化CSS或使用更基础的样式。
5. 字体问题： 如果您的HTML使用了非标准字体，html2canvas可能无法正确渲染。确保这些字体在页面加载时可用，或者考虑将其转换为图片时嵌入。jsPDF本身也支持嵌入字体，但对于HTML转图片的方式，这通常不是直接问题。
6. 性能考虑： 渲染大量或非常复杂的HTML元素可能会消耗较多的浏览器资源，导致页面卡顿。对于大型文档，可以考虑分批处理或优化HTML结构。

总结

通过将html2canvas与jsPDF结合使用，我们可以有效地解决将动态生成的HTML内容导出为PDF时遇到的空白文件问题。核心思想是将HTML元素转换为高质量的图像，然后将这些图像嵌入到PDF文档中。这种方法提供了更高的灵活性和可靠性，尤其适用于处理复杂或动态的HTML结构。理解这两个库的工作原理及其异步特性，是成功实现此类功能的关键。

以上就是解决jsPDF下载空文件问题：HTML表格转换为PDF的正确姿势的详细内容，更多请关注其它相关文章！

# javascript  # 是一个  # 文档  # 分页  # 多个  # 转换为  # i  # ai  # 前端开发  # app  # 伪元素  # go  # ajax  # 前端  # js  # html  # java  # css  # 浏览器  # 关键词seo排名哪个好 火20星周到  # 营销推广能力是什么  # 推广和营销不同  # 网络营销推广方案文章  # 云速推高端网站建设  # SEO北京烟花图片  # 网站推广建站方案怎么做  # 湘潭企业网站建设招聘  # 精准营销推广软件下载  # 香港seo软件转化乐云seo  # 解决问题  # 更高  # 这部  # 输入框  # 您的 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： diskgenius分区工具如何设置Bios启动项  AffinityDesigner图层蒙版怎么用_AffinityDesigner图层蒙版设计应用  《淘宝联盟》推广自己的店铺方法  LocoySpider如何批量采集电商商品_LocoySpider电商采集的模板应用  《广发易淘金》国债逆回购操作教程  c++类和对象到底是什么_c++面向对象编程基础  空腹吃苹果好吗 苹果空腹摄入指南  《饿了么》拼好饭点外卖教程2025  《金山词霸》语音翻译方法  uc浏览器官网网页版使用 uc浏览器官网免费在线首页  QQ邮箱注册地址 免费获取QQ邮箱账号  CodeIgniter 3 中基于 MySQL 数据高效生成动态图表教程  英国搜索：多数英国人认为语言搜索是未来搜索  百度地图离线地图无法加载如何解决 百度地图离线地图加载优化方法  使用TinyButStrong生成HTML并结合Dompdf创建PDF教程  抖音官网入口快速访问 抖音网页版账号注册解析  mysql中如何配置字符集和排序规则_mysql字符集排序配置  《大学搜题酱》官网地址登录  wps文字怎么设置文字环绕图片的方式_wps文字如何设置文字环绕图片方式  如何解决Casbin日志与应用日志不统一的问题，使用casbin/psr3-bridge实现无缝集成  快手网页版官方访问 快手网页版页面在线打开  苹果电脑如何快速截图并编辑 苹果电脑截屏标注快捷操作  感染了幽门螺杆菌一定会导致胃癌吗？蚂蚁庄园今日答案最新11.30  PHP中实现JSON数据数组分页的教程  三角洲行动2025年9月10日摩斯密码分享  企查查官网和爱企查 企查查企业查询官网入口  Linux如何开发轻量级数据服务模块_Linux服务化设计  谷歌邮箱官方入口链接 谷歌邮箱网页版电脑端快速登录  J*a列表元素格式化输出教程  苹果手机手电筒无法开启  抖音视频如何添加标题？添加标题有哪些好处？  《花瓣》创建专辑方法  Flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理  《爱南宁》认证电动车方法  汽水音乐网页端访问 汽水音乐官方网页直达  纯CSS实现自适应宽度与响应式布局的水平按钮组  J*aScript与HTML元素交互：图片点击事件与链接处理教程  六级准考证号怎么查_四六级准考证查询入口官网  QQ邮箱PC端登录页面_QQ邮箱网页版登录界面  附近酒吧怎么找？  多闪APP官方下载安装入口_多闪最新版本获取入口  163邮箱在线登录 163邮箱网页版在线入口  QQ邮箱手机版网页版 QQ邮箱登录入口地址  Final Cut Pro视频加EQ教程  有道AI翻译入口 智能写作官方网站入口  Win10输入法不见了怎么办 Win10找回语言栏图标教程  Python中对象引用与链表属性赋值的机制解析  魔法祈幻界兑换码礼包大全  江苏大剧院会员卡购买步骤  《下一站江湖2》独孤剑诀习得方法 

 2025-11-14