Question

我正在尝试将＆＃34; TABLE FROM HTML＆＃34;使用＆＃34; Header＆＃34; ...看看这些例子。我可以让每个人分开工作，但不能一起工作。

当我把两者结合起来时，我遇到了问题......你能看出我在这里做错了什么以及为什么这不起作用？

可能在我的标题VAR中......此外，还有一种方法可以从导出中排除列???

使用此https://github.com/simonbengtsson/jsPDF-AutoTable

 <html>
<body>
<button onclick="generate()">Download PDF</button>

<script src="jspdf/jspdf.min.js"></script>
<script src="jspdf/jspdf.plugin.autotable.src.js"></script>

<script>
    function generate() {

    var doc = new jsPDF('p', 'pt');

    var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));
    doc.autoTable(res.columns, res.data, options);

    var header = function (data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
    doc.text("Testing Report", data.settings.margin.left + 55, 50);
    };

    var options = {
    beforePageContent: header,
    margin: {top: 80}
    };

    doc.autoTable(columns, data, options);

    doc.save("table.pdf");
}

var headerImgData = 'data:image/jpeg;base64,/9... my dataimage';
 </script>

 <br/><br/>

<table id="basic-table">
<thead>
<tr>
    <th title="Field #1">ID</th>
    <th title="Field #2">First name</th>
    <th title="Field #3">Last name</th>
    <th title="Field #4">Email</th>
    <th title="Field #5">Country</th>
    <th title="Field #6">IP-address</th>
</tr>
</thead>
<tbody>
<tr>
    <td align="right">1</td>
    <td>Donna</td>
    <td>Moore</td>
    <td>dmoore0@furl.net</td>
    <td>China</td>
    <td>211.56.242.221</td>
</tr>
<tr>
    <td align="right">2</td>
    <td>Janice</td>
    <td>Henry</td>
    <td>jhenry1@theatlantic.com</td>
    <td>Ukraine</td>
    <td>38.36.7.199</td>
</tr>
<tr>
    <td align="right">3</td>
    <td>Ruth</td>
    <td>Wells</td>
    <td>rwells2@constantcontact.com</td>
    <td>Trinidad and Tobago</td>
    <td>19.162.133.184</td>
</tr>
<tr>
    <td align="right">4</td>
    <td>Jason</td>
    <td>Ray</td>
    <td>jray3@psu.edu</td>
    <td>Brazil</td>
    <td>10.68.11.42</td>
</tr>
<tr>
    <td align="right">5</td>
    <td>Jane</td>
    <td>Stephens</td>
    <td>jstephens4@go.com</td>
    <td>United States</td>
    <td>47.32.129.71</td>
</tr>
<tr>
    <td align="right">6</td>
    <td>Adam</td>
    <td>Nichols</td>
    <td>anichols5@com.com</td>
    <td>Canada</td>
    <td>18.186.38.37</td>
</tr>
</tbody>
</table>

</body>
</html>

Answer 1

我不完全确定你想要完成什么，但我做了最好的猜测。这是一个codepen的结果。我将生成函数更改为：

function generate() {

  var doc = new jsPDF('p', 'pt');

  var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));
  doc.autoTable(res.columns, res.data, {margin: {top: 80}});

  var header = function(data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
    doc.text("Testing Report", data.settings.margin.left, 50);
  };

  var options = {
    beforePageContent: header,
    startY: doc.autoTableEndPosY() + 20
  };

  doc.autoTable(res.columns, res.data, options);

  doc.save("table.pdf");
}

Answer 2

这是我使用jspdf（）将表导出为PDF的方式。我提到了将在主体部分中显示在UI中的数组。还提到了标题。

代码-

 <script src="jspdf.min.js"></script>
 <script src="jspdf.plugin.autotable.min.js"></script>

  import jsPDF from 'jspdf';
 import 'jspdf-autotable';

 capture(){

   var doc = new jspdf('l', 'pt' , 'a4'); //landscape page

   doc.autoTable({

  body: this.responseData,
  columns: [{header: 'version', dataKey: 'version'}, {header: 
    'sourceFileName', 
  dataKey: 'sourceFileName'},
  {header: 'targetFileName', dataKey: 'targetFileName'}, {header: 'id', 
 dataKey: 'id'}


  ]
 ]
})

doc.save("table.pdf");
  }

P.S：https://www.npmjs.com/package/jspdf-autotable

Answer 3

var jsPDF = require('jspdf');
require('jspdf-autotable');

使用此文件导入

JSPDF和AutoTable的问题

3 个答案: