javascript JSPDF 和 AutoTable 的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33743540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problems with JSPDF and AutoTable
提问by Ronald
I am trying to combine the "TABLE FROM HTML" with a "Header"... Looked at the examples. I can get each one working separately, but not together.
我正在尝试将“来自 HTML 的表格”与“标题”结合起来......查看示例。我可以让每个人单独工作，但不能一起工作。
When I combine the two, I am having problems...Can you see what I am doing wrong here and why this doesnt work ??
当我将两者结合起来时，我遇到了问题......你能看到我在这里做错了什么，为什么这不起作用？
Might be in my header VAR... Also, it there a way to exclude a column from the export ???
可能在我的标题 VAR 中...另外，有一种方法可以从导出中排除一列？？？
Using this https://github.com/simonbengtsson/jsPDF-AutoTable
使用这个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>[email protected]</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td align="right">2</td>
<td>Janice</td>
<td>Henry</td>
<td>[email protected]</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td align="right">3</td>
<td>Ruth</td>
<td>Wells</td>
<td>[email protected]</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>[email protected]</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td align="right">5</td>
<td>Jane</td>
<td>Stephens</td>
<td>[email protected]</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>[email protected]</td>
<td>Canada</td>
<td>18.186.38.37</td>
</tr>
</tbody>
</table>
</body>
</html>
回答by Simon Bengtsson
I'm not entirely sure what you want to accomplish, but I made a best guess. Here is a codepenwith the result. I changed your generate function to this:
我不完全确定你想要完成什么，但我做了一个最好的猜测。这是一个带有结果的代码笔。我将您的生成功能更改为：
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");
}
回答by Techdive
Here is the way i exported my Table in PDF using jspdf(). I mentioned my array that would display in UI in the body part. Also mentioned the headers.
这是我使用 jspdf() 以 PDF 格式导出表格的方式。我提到了我的数组，它将显示在主体部分的 UI 中。还提到了标题。
code -
代码 -
<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");
}
