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

Question

是否可以做这样的事情:

  <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 和 secondary_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

Answer 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