时间戳

首页 > 解决方案 > 使用制表符 4.2 下载 xls 时的空白表

tabulator - 使用制表符 4.2 下载 xls 时的空白表

问题描述

使用 4.2 版本的制表器，我可以下载 xls 文档，但内容（数据）丢失。使用 table.download。

var table;
        function populateReport(url) {

            console.log("report generated. URL = " + url);
            table = new Tabulator("#ReportResults", {
                height: 500,
                pagination: "local",
                paginationSize: 25,
                index: "id",
                ajaxURL: url,
                columns:[
                    {title:"ID", field:"id", visible:"false",download:"false"},
                    {title:"Name", field:"UserFirstLastName", align:"left", formatter:"html"},
                    {title:"Email", field:"UserEmailAddress", align:"left", formatter:"html"},
                    {title:"Title", field:"UserTitle", align:"left", formatter:"html"},
                    {title:"Start Date", field:"UserStartDate", align:"left", formatter:"html"},
                    {title:"Last Activity", field:"UserLastActivity", align:"left", formatter:"html"},
                    {title:"Total Training", field:"UserTrainingTime", align:"left", formatter:"html"},
                    {title:"Manager", field:"ManagerFirstLastName", align:"left", formatter:"html"},
                    {title:"Series", field:"CourseSeriesName", align:"left", formatter:"html"},
                    {title:"Course", field:"CourseLibraryName", align:"left", formatter:"html"},
                    {title:"Assigned", field:"DateAssigned", align:"left", formatter:"html"},
                    {title:"Deadline", field:"AssignmentDeadline", align:"left", formatter:"html"},
                    {title:"Completed", field:"AssignmentCompletedDate", align:"left", formatter:"html"},
                    {title:"Score", field:"CourseScore", align:"center", formatter:"html"},
                    {title:"Group", field:"GroupName", align:"left", formatter:"html"},
                    {title:"Team", field:"TeamName", align:"left", formatter:"html"},
                    {title:"Catalog", field:"CatalogName", align:"left", formatter:"html"},
                ],
            });

            hideWrapper();
            $("#ReportPanel").slideDown();
            $('#DateLabel').show();
            console.log("report data displayed"); 

$("#download-xlsx").click(function () {
                table.download("xlsx", "data.xlsx", { sheetName: "MyData" });
                //$("#ReportResults").tabulator("download", "xlsx", "data.xlsx", { sheetName: "My Data" });
            });

            $('#ReportPanel').slideUp();
            $('#ReportResults').tabulator();
            $('#ReportResults').tabulator("destroy");

任何建议帮助将不胜感激。使用 4.2 版本的制表符，我可以下载 xls 文档，但内容（数据）丢失。使用 table.download。

标签： tabulator

解决方案

工作正常复制我的示例或编辑您的问题并放置真实的表格数据而不是 Ajax URL

const tabledata1 = [{
    id: 1,
    name: "Oli ",
    money: "0",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: "0",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine ",
    money: "0",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret ",
    money: "0",
    col: "yellow",
    dob: "31/01/1999"
  },
];


const table = new Tabulator("#example-table", {
           height: 500,
            pagination: "local",
            paginationSize: 25,
            index: "id",
  data: tabledata1, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  autoColumns: true
});

function myFunction() {
table.download("xlsx", "data.xlsx", {sheetName:"MyData"}); //download a Xlsx file that has a sheet name of "MyData"
}
<!DOCTYPE html>
<html lang="en">

<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 type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>


<body>
  <button onclick="myFunction()">Download Excel</button>

  <div id="example-table"></div>




</body>

</html>

推荐阅读