tabulator - 如何为csv制作下载按钮？

Question

我正在为我的表格下载到 CSV 按钮。

我在表格底部制作了一个按钮，用于触发down()下载功能。

var tableDataNested = [{
    group: "Backend Engineer A",
    name: "Sourced",
    applied: 300,
    screened: 40,
    interviewed: 5
  },
  {
    group: "Backend Engineer A",
    name: "Referred",
    applied: 3,
    screened: 1,
    interviewed: 0
  },
  {
    group: "Backend Engineer A",
    name: "University",
    applied: 4,
    screened: 2,
    interviewed: 1
  },
  {
    group: "Backend Engineer B",
    name: "Sourced",
    applied: 1000,
    screened: 140,
    interviewed: 55
  },
  {
    group: "Backend Engineer B",
    name: "Referred",
    applied: 30,
    screened: 11,
    interviewed: 2
  },
  {
    group: "Backend Engineer B",
    name: "University",
    applied: 40,
    screened: 22,
    interviewed: 10
  },
];

function down() {
  table.download("csv", "data.csv", {
    delimiter: ","
  });
}

var table = new Tabulator("#example-table", {
  data: tableDataNested,
  dataTree: true,
  dataTreeStartExpanded: true,
  groupBy: "group",
  columns: [{
      title: "Name",
      field: "name",
      responsive: 0
    },
    {
      title: "Applied",
      field: "applied",
      bottomCalc: "sum"
    },
    {
      title: "Screened",
      field: "screened",
      bottomCalc: "sum"
    },
    {
      title: "Interviewed",
      field: "interviewed",
      bottomCalc: "sum"
    },
  ],

  footerElement: "<button id='download-csv' onclick='down();'>Download CSV</button>",

});

<script src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.3.0/css/tabulator.min.css" rel="stylesheet"/>
<div id="example-table"></div>

标签： tabulator

Answer 1

对我来说很好

var tableDataNested = [{
    group: "Backend Engineer A",
    name: "Sourced",
    applied: 300,
    screened: 40,
    interviewed: 5
  },
  {
    group: "Backend Engineer A",
    name: "Referred",
    applied: 3,
    screened: 1,
    interviewed: 0
  },
  {
    group: "Backend Engineer A",
    name: "University",
    applied: 4,
    screened: 2,
    interviewed: 1
  },
  {
    group: "Backend Engineer B",
    name: "Sourced",
    applied: 1000,
    screened: 140,
    interviewed: 55
  },
  {
    group: "Backend Engineer B",
    name: "Referred",
    applied: 30,
    screened: 11,
    interviewed: 2
  },
  {
    group: "Backend Engineer B",
    name: "University",
    applied: 40,
    screened: 22,
    interviewed: 10
  },
];

function down() {
  table.download("csv", "data.csv", {
    delimiter: ","
  });
}

var table = new Tabulator("#example-table", {
  data: tableDataNested,
  dataTree: true,
  dataTreeStartExpanded: true,
  groupBy: "group",
  columns: [{
      title: "Name",
      field: "name",
      responsive: 0
    },
    {
      title: "Applied",
      field: "applied",
      bottomCalc: "sum"
    },
    {
      title: "Screened",
      field: "screened",
      bottomCalc: "sum"
    },
    {
      title: "Interviewed",
      field: "interviewed",
      bottomCalc: "sum"
    },
  ],

  footerElement: "<button id='download-csv' onclick='down();'>Download CSV</button>",

});

<script src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.3.0/css/tabulator.min.css" rel="stylesheet"/>
<div id="example-table"></div>