javascript - 如何使用 jspdf-Autotable 在表格中添加自定义最后一行
问题描述
我正在尝试使用jspdf和jspdf-Autotable构建一个小型应用程序,但我没有找到如何在现有表中使用另一个变量值创建自定义最后一行。
到目前为止,我所做的是:
doc.autoTable({
body: concepts,
columns: [{ header: 'Concept', dataKey: 'name' }, { header: 'Amount', dataKey: 'amount' }],
didDrawPage: function (data) {
let rows = data.table.body;
rows.push({
content: 'Total = ' + total,
colSpan: 2
});
if (data.row.index === rows.length - 1) { doc.setFillColor(239, 154, 154); }
}
});
我很确定我对如何面对这个问题感到困惑。total
带有一个数字值,但我想单独在一个自定义的最后一行打印它,但在表格中,就像 Excel 规则一样。
任何建议都会有所帮助!谢谢你。
解决方案
您必须在处理元素之前添加自定义数据。用于...
解构数据并与新行合并。
function generate() {
var doc = new jsPDF();
var data = [
{name: "Bar", amount: 1200},
{name: "Zap", amount: 200},
{name: "Foo", amount: 320}];
var total = data.reduce((sum, el) => sum + el.amount, 0);
var body = [...data.map(el => [el.name, el.amount]),
[{content: `Total = ${total}`, colSpan: 2,
styles: { fillColor: [239, 154, 154] }
}]]
doc.autoTable({
head: [['Concept', 'Amount']],
body: body
});
doc.save("table.pdf");
}
<script src="https://unpkg.com/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@3.4.1/dist/jspdf.plugin.autotable.js"></script>
<button onclick="generate()">Generate PDF</button>
推荐阅读
- identityserver4 - 可以/最新版本的 IdentityServer4 是否支持动态客户端添加?
- gekko - 在过程模拟期间初始化状态变量的导数
- python - 错误:(-215:断言失败)长度 > FLT_EPSILON 在文本检测中的函数“取消剪辑”中
- c# - WPF在运行方法时更改用户控件中的按钮内容
- kubernetes - 我可以在上下文路径上托管 hasura 端点吗?
- reactjs - 大日历 - 如何在月视图中显示半天
- c# - 从 Yahoo! 映射 JSON!财务 API 到 C# 对象
- java - 如何在 apache 光束/数据流中实现基于大小的批处理而不是基于时间的 BoundedSource?
- .net - 减少应用程序使用的 SQL Server 登录/用户数
- django - Django:多选表单(小部件)