我可以使用 html 字符串创建 jsPDF 文件的一部分吗？答案

【问题标题】：can i create a part of a jsPDF file using html string?我可以使用 html 字符串创建 jsPDF 文件的一部分吗？
【发布时间】：2019-08-11 19:43:33
【问题描述】：

有没有可能做这样的事情：

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

   .... <other code> ....

   doc.addImage(imgData, 'PNG', 10, 10);       
   doc.text(first_name + " " + last_name, 10, 100);
   doc.text(company, 10, 120);
   doc.text(email, 10, 130);
   doc.fromHTML(april_2_html_table, 10, 140);
   doc.addPage();

基本上我有一个包含 html 表的字符串，并且我已将其保存为“first_html_table”。我想将此表包含在 PDF 中。该字符串是动态生成的。

我没有收到错误，但基本上除了表格之外的所有内容都出现在 PDF 中。

编辑 1

我目前收到一条错误消息：

jspdf.min.js:63 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
    at k (VM1512 jspdf.min.js:63)
    at r (VM1512 jspdf.min.js:63)
    at VM1512 jspdf.min.js:63
    at i (VM1512 jspdf.min.js:63)
    at v (VM1512 jspdf.min.js:63)
    at x (VM1512 jspdf.min.js:63)
    at Object.e.fromHTML (VM1512 jspdf.min.js:63)
    at badgelist.forEach.badge (printbadges.php:153)
    at Array.forEach (<anonymous>)
    at Object.onrendered (printbadges.php:122)

我的代码可以在这里看到：https://pastebin.com/3AZZ3AYb 我正在尝试只为一个“徽章”测试一条记录，并且我已经在控制台中验证了我正在寻找的所有数据都存在。我也尝试将 first_html_table 的内容直接转储到 .fromHTML() 中，但这也失败了。我目前正试图将其缩小到它不喜欢的特定单元格或类似的东西。我已经删除了 html 中的所有 colspans 和边框，但这并没有真正帮助。任何提示将不胜感激。

编辑 2

当我尝试运行 fromHTML() 函数时，它肯定会死掉。我在 html 中添加了两个 div，并使用 first_html_table 和 second_html_table 填充 div 的内容。一切看起来都在屏幕上。

我做的另一件事是添加控制台调试，我可以肯定地看到它在调用 fromHTML 方法时正在死去：

            console.log(first_html_table); //looks good
            console.log(badge['first_name']); //looks good
            $("#agenda1").html(first_html_table); //looks good
            $("#agenda2").html(second_html_table); //looks good
            doc.addImage(imgData, 'PNG', 10, 10);       
            doc.text(badge['first_name'] + " " + badge['last_name'], 10, 100);
            doc.text(badge['company'], 10, 120);
            console.log('got this far'); //works
            doc.text(badge['email'], 10, 130);
            console.log('afteremail');//works
            doc.fromHTML(first_html_table, 10, 160);  
            console.log("do you get here?"); //code doesn't get here

【问题讨论】：

在我下面的帖子中提供了带有html字符串的示例jspdf，请分享您尝试过的html字符串

标签： javascript ajax jspdf

【解决方案1】：

要达到预期效果，请使用以下选项

var doc = new jsPDF();

//var imgData = 'https://www.w3schools.com/w3css/img_lights'
var first_name = ''
var last_name = ''
var company = ''
var email = ''
var april_2_html_table = '<table><tr><td>1</td><td>ABC</td></tr></table>'

$('#show').click(function () {
  //doc.addImage(imgData, 'JPG', 10, 10);       
   doc.text(first_name + " " + last_name, 10, 100);
   doc.text(company, 10, 120);
   doc.text(email, 10, 130);
   doc.fromHTML(april_2_html_table, 10, 140);
   doc.addPage();  
    doc.save('sample.pdf');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
 Test</div>

<button id="show">Generate PDF</button>

codepen - https://codepen.io/nagasai/details/gEBjdq

【讨论】：

@dot，你能控制会话吗，在这行之后 - badge['sessiondata'].forEach(session => {
这似乎是未定义的
如果可能，请提供控制台 //console.log(badgelist);
为避免未定义会话出现此错误，请添加附加条件 - if (session && session['date'] == '2019-04-02')
但是那部分是在一个for循环中所以如果会话不存在它就不会进入对吗？

【解决方案2】：

问题与格式错误的 HTML 有关。我的动态表中的第一行只有一个单元格，而其他行有 3 个。所以我现在必须在第一个单元格中添加两个空单元格，现在它很高兴。哎哟。

【讨论】：