Проблема: При загрузке через табулятор все форматирование столбцов удаляется. Мне известно об использовании средств доступа для переформатирования данных перед загрузкой. Таким образом, я могу определить форматирование для отдельных столбцов. Однако для вычислений в столбцах Я не могу определить форматирование результатов вычислений во время загрузки в формате 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-файл выглядел в точности как таблица табулятора с некоторыми дополнительными строками, верхними и нижними колонтитулами.
Любая помощь будет принята с благодарностью.