Question

我正在尝试在我的项目上实现可下载的表，我具有所需的所有CDN，并且制表符已由节点安装。我在Laravel编程。到目前为止，这是我的代码：

<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
  var tabledata = [
  {id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
  table.setData(tableData);
var table = new Tabulator("#example-table", {
    data:tabledata,
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
});

//trigger download of data.csv file
$("#download-csv").click(function(){
    table.download("csv", "data.csv");
});

//trigger download of data.json file
$("#download-json").click(function(){
    table.download("json", "data.json");
});

//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
    table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});

//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>
<script type="text/javascript">
</script>
</div>

///////////////////////////////// CDN /////////////// //////////////////////

  <script src="https://kit.fontawesome.com/d6743b0f97.js" crossorigin="anonymous"></script>
  <link href="dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="dist/js/tabulator.min.js"></script>
  <link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
  <script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>
  <link href="dist/css/tabulator.css" rel="stylesheet">
  <script type="text/javascript" src="dist/js/tabulator.js"></script>
  <script type="text/javascript" src="dist/js/tabulator_core.js"></script>
  <script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
  <script type="text/javascript" src="dist/js/modules/format.min.js"></script>
  <script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
  <script type="text/javascript" src="dist/js/modules/format.min.js"></script>
  <script type="text/javascript" src="dist/js/tabulator.min.js"></script>
  <script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>

这就是我的身体：https://i.imgur.com/sC6og2Q.png 没事

Answer 1

制表器仅管理表格内部的区域，不会在表格本身之外创建按钮。

您需要自己在页面上添加一个按钮：

<button id="download-csv">Download CSV</button>

然后添加单击绑定以触发对表的操作：

$("#download-csv").click(function(){
    table.download("csv", "data.csv");
});

另外，您要包含很多不需要的文件，如果要包含tabulator.js，则不需要包含任何其他文件，因为它们会将它们捆绑在一起。

如果您要使用tabulator_core.js，则只需将其或缩小版本包含一次

尝试创建可下载的制表器表格，但没有出现

1 个答案: