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和borders，但这并没有真正的帮助。任何提示将不胜感激。

编辑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

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

Answer 2

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

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

2 个答案: