从制表器下载pdf时保留ColumnCalculations的格式

时间:2019-06-18 09:58:32

标签: grouping jspdf calculated-columns formatter tabulator

问题:通过制表符下载时,所有列格式均被删除。我知道在下载之前使用访问器来重新格式化数据。这样,我可以为单个列定义格式。但是,对于列计算,在以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看起来完全像制表器表格,并带有一些其他行,页眉和页脚。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

<!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>