JSPDF 和 AutoTable 的问题答案

【问题标题】：Problems with JSPDF and AutoTableJSPDF 和 AutoTable 的问题
【发布时间】：2015-11-16 19:57:55
【问题描述】：

我正在尝试将“TABLE FROM HTML”与“标题”结合起来......查看了示例。我可以让每个人单独工作，但不能一起工作。

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

可能在我的标题 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>

【问题讨论】：

标签： javascript php jquery arrays jspdf

【解决方案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");
}

【讨论】：

【解决方案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");
  }

附注：https://www.npmjs.com/package/jspdf-autotable

【讨论】：

【解决方案3】：

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

用这个来导入

【讨论】：