grouping - 从制表器下载 pdf 时保留 ColumnCalculations 的格式
问题描述
问题:通过制表符下载时,所有列格式都被删除。我知道在下载之前使用访问器重新格式化数据。这样我就可以为各个列定义格式。但是,对于列计算,我无法在以 pdf 格式下载时定义计算结果的格式。此外,我希望行组标题具有适当的缩进,因为它在制表符中可用。
实现代码:
var tabledata = [
{
"Department": "Dept1",
"Promo Name": "$2 Off",
"Menu": "BURGER",
"Check #": "111",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "12.50",
"Discount": "2.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "$2 Off",
"Menu": "soda",
"Check #": "1112",
"Settled By": "emp2",
"Discount By": "emp2",
"Price": "11.95",
"Discount": "2.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "10% Off",
"Menu": "BURGER",
"Check #": "112",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "12.50",
"Discount": "0.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "10% Off",
"Menu": "Water",
"Check #": "1122",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "1.85",
"Discount": "0.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "222",
"Menu": "menu2",
"Check #": "1134",
"Settled By": "emp3",
"Discount By": "emp3",
"Price": "10.25",
"Discount": "2.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "pizza",
"Check #": "1156",
"Settled By": "emp3",
"Discount By": "emp3",
"Price": "12.95",
"Discount": "6.48",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "BURGER",
"Check #": "11562",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "12.50",
"Discount": "3.13",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "sandwich",
"Check #": "157",
"Settled By": "emp2",
"Discount By": "emp2",
"Price": "56.25",
"Discount": "28.13",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "coke",
"Check #": "27818",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "3.00",
"Discount": "1.50",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "juice",
"Check #": "13346",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "3.00",
"Discount": "1.50",
"Count of PromoID": "1"
}
];
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
})
var colMoneyFormatter = function (value, data, type, params, column) {
return formatter.format(value);
}
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table",
{
//height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata //assign data to table
,
layout: "fitData" //fit columns to width of table (optional)
,
groupClosedShowCalcs: [true, true],
columnCalcs: "both",
groupBy: ["Department", "Promo Name"],
groupStartOpen: [true, true],
groupHeader: function(value, count, data, group) {
return value + "<span style='color:#d00; margin-left:10px;'>(" + count + " item)</span>";
},
groupToggleElement: ["arrow", "arrow"],
columns: [
{ title: "Department", field: "Department", formatter: "plaintext" },
{ title: "Promo Name", field: "Promo Name", formatter: "plaintext" },
{ title: "Description", field: "Menu", formatter: "plaintext" }, {
title: "Price",
field: "Price",
accessorDownload: colMoneyFormatter,
formatter: "money",
bottomCalc: "sum",
bottomCalcParams: { precision: 2 },
bottomCalcFormatter: "money",
bottomCalcFormatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
},
formatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
}
}, {
title: "Discount",
field: "Discount",
accessorDownload: colMoneyFormatter,
formatter: "money",
bottomCalc: "sum",
bottomCalcParams: { precision: 2 },
bottomCalcFormatter: "money",
bottomCalcFormatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
},
formatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
}
}, { title: "Check #", field: "Check #", formatter: "plaintext" },
{ title: "Settled By", field: "Settled By", formatter: "plaintext" },
{ title: "Discount By", field: "Discount By", formatter: "plaintext" }
]
});
//trigger download of data.pdf file
$("#download-pdf").click(function () {
table.download("pdf",
"data.pdf",
{
orientation: "landscape" //set page orientation to portrait
,
title: "Detailed Promo Report" //add title to report
,
autoTable: {
margin: {
top: 60
}
}
});
});
我希望我的 pdf 看起来与带有一些额外行、页眉和页脚的制表符表完全一样。
任何帮助将不胜感激。
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="download-pdf">Download PDF</button>
<div id="example-table"></div>
</body>
</html>
<script>
var tabledata = [{
"Department": "Dept1",
"Promo Name": "$2 Off",
"Menu": "BURGER",
"Check #": "111",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "12.50",
"Discount": "2.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "$2 Off",
"Menu": "soda",
"Check #": "1112",
"Settled By": "emp2",
"Discount By": "emp2",
"Price": "11.95",
"Discount": "2.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "10% Off",
"Menu": "BURGER",
"Check #": "112",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "12.50",
"Discount": "0.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "10% Off",
"Menu": "Water",
"Check #": "1122",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "1.85",
"Discount": "0.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "222",
"Menu": "menu2",
"Check #": "1134",
"Settled By": "emp3",
"Discount By": "emp3",
"Price": "10.25",
"Discount": "2.00",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "pizza",
"Check #": "1156",
"Settled By": "emp3",
"Discount By": "emp3",
"Price": "12.95",
"Discount": "6.48",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "BURGER",
"Check #": "11562",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "12.50",
"Discount": "3.13",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "sandwich",
"Check #": "157",
"Settled By": "emp2",
"Discount By": "emp2",
"Price": "56.25",
"Discount": "28.13",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "coke",
"Check #": "27818",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "3.00",
"Discount": "1.50",
"Count of PromoID": "1"
},
{
"Department": "Dept1",
"Promo Name": "meal",
"Menu": "juice",
"Check #": "13346",
"Settled By": "aaaaa",
"Discount By": "aaaaa",
"Price": "3.00",
"Discount": "1.50",
"Count of PromoID": "1"
}
];
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
})
var colMoneyFormatter = function(value, data, type, params, column) {
return formatter.format(value);
}
const table = new Tabulator("#example-table", {
data: tabledata,
layout: "fitData",
groupClosedShowCalcs: [true, true],
columnCalcs: "both",
groupBy: ["Department", "Promo Name"],
groupStartOpen: [true, true],
groupHeader: function(value, count, data, group) {
return value + "<span style='color:#d00; margin-left:10px;'>(" + count + " item)</span>";
},
groupToggleElement: ["arrow", "arrow"],
columns: [{
title: "Department",
field: "Department",
formatter: "plaintext"
},
{
title: "Promo Name",
field: "Promo Name",
formatter: "plaintext"
},
{
title: "Description",
field: "Menu",
formatter: "plaintext"
}, {
title: "Price",
field: "Price",
accessorDownload: colMoneyFormatter,
formatter: "money",
bottomCalc: "sum",
bottomCalcParams: {
precision: 2
},
bottomCalcFormatter: "money",
bottomCalcFormatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
},
formatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
}
}, {
title: "Discount",
field: "Discount",
accessorDownload: colMoneyFormatter,
formatter: "money",
bottomCalc: "sum",
bottomCalcParams: {
precision: 2
},
bottomCalcFormatter: "money",
bottomCalcFormatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
},
formatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
}
}, {
title: "Check #",
field: "Check #",
formatter: "plaintext"
},
{
title: "Settled By",
field: "Settled By",
formatter: "plaintext"
},
{
title: "Discount By",
field: "Discount By",
formatter: "plaintext"
}
]
});
//trigger download of data.pdf file
$("#download-pdf").click(function(){
table.download("pdf", "data.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Example Report" //add title to report
});
});
</script>
推荐阅读
- android - 寻找在 Android 中以 Single Activity App 方法实现 SearchView 的想法
- c++ - 在 C++ 的任何修订版中,是否明确定义了联合的使用?
- java - 使用 org/json/json/20171018 存储库读取 Java 中的 JSON 数据
- python - NumPy complex128除法与float64除法不一致
- google-apps-script - 谷歌表格 - 线性比例
- netezza - Netezza 通过联合 2 个表创建表
- spring-boot - 使用 Citrus 模拟 SFTP 和 Kafka 以进行基于 Spring-Boot apache-camel xml 的路由的集成测试?
- excel - 根据另一个单元格更改列值
- testing - 如何在 Flutter 小部件中测试回调函数
- javascript - 在收到来自单个工作人员的消息后发送所有工作人员消息