jsPDF 问题 - HTML 未使用 jsPDF 呈现为 PDF答案

【问题标题】：jsPDF Issue - HTML is not rendering into PDF using jsPDFjsPDF 问题 - HTML 未使用 jsPDF 呈现为 PDF
【发布时间】：2021-06-18 09:30:57
【问题描述】：

我只是想使用 jsPDF 库在客户端生成 PDF。在这个 PDF 中，我正在编写数据以及获取 html 页面的几个部分。在我的页面上，我想在我的 pdf 中捕获一些表格。为此，我只是尝试使用 jsPDF 的 html 函数，但它们会抛出错误并且表格不是用 PDF 编写的。

下面是代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>  
<script type="text/javascript"> 
   function generatePDF(){  
      let doc = new jsPDF();  
      doc.html($('#reading_stats'), { //reading_stats is "ID" of html table
          x: 10,
          y: 10
      });

      doc.save('test.pdf');
   }
</script>

运行上述代码后，浏览器抛出以下错误，生成 PDF 时什么都没有：

我还尝试了另一种传递表格 html 的方法，如下所示：

<script type="text/javascript"> 
   function generatePDF(){  
      let doc = new jsPDF();  
      doc.html($('#reading_stats_container').html(), { //reading_stats_container is "ID" of html table parent div
          x: 10,
          y: 10
      });

      doc.save('test.pdf');
   }
</script>

运行上述代码后，我遇到以下错误，并且生成的 PDF 没有任何内容：

我在 google 上看过 jsPDF 文档以及许多解决方案。所有人都在使用这些逻辑将 html 插入 PDF。

我还尝试了在以下 URL 上共享的解决方案：
Export HTML table to PDF using jsPDF

为了实现上述 URL 解决方案，我已将我的 jsPDF 版本降级为 1.2.6 并使用相同的逻辑（在上述 URL 上共享），但在这种情况下，PDF 将表格的所有单元格呈现在单个垂直线中。

下面是我正在生成的创建引导 css 的 html 表：

我无法理解为什么没有解决方案对我有用。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： jspdf

【解决方案1】：

 var pdfdoc = new jsPDF('p','pt','a4');
pdfdoc.fromHTML($('#reading_stats_container').html(), 10, 10, '',
function(callback){pdfdoc.save('First.pdf');});
});

【讨论】：