Tabulator - 下载保持原始 Javascript 结构的文件答案

【问题标题】：Tabulator - Download file keeping the original Javascript structureTabulator - 下载保持原始 Javascript 结构的文件
【发布时间】：2023-02-26 02:52:43
【问题描述】：

我正在使用 Tabulator 开发交互式网页，但我遇到了一些问题文件下载. 基本上，我想下载表格Javascript 格式.这意味着我正在将一个 Javascript 表加载到网页中，用户可以交互并更改表中的某些值并节省变化。单击“保存”时，我想下载一个文件，该文件必须与我最初加载的 Javascript 相同（但当然，用户更改了值）。

在 Tabulator 网站上，我发现只能以 CSV、HTML、XLSX、JSON 和 PDF 格式执行保存/下载，而不是Javascript.

例如，要下载 CSV 格式的数据，可以执行以下操作： table.download("csv", "data.csv") 我想知道是否有类似的东西： table.download("js", "data.js")

我试图实施的解决方案是创建我的自定义文件格式器，这可以解决问题，但我想知道是否有更优雅、更简单的解决方案，因为我需要处理不同的情况，因为我使用的是不同的表结构（嵌套、分组等）。

预先感谢您的帮助！

【问题讨论】：

不确定是否可以使用开箱即用的制表符来完成，但是您是否考虑过使用contenteditable？
@FiddlingAway 问题是用户可以修改 Tabulator 表上的单元格并且此更改必须保存在服务器上，这就是我尝试下载文件的原因。你认为我可以在这种情况下使用“contenteditable”属性吗？如果是，如何？谢谢您的回答！
如果您只想更改表格并将其保存在本地（更改单元格内容，单击按钮，将表格另存为 CSV 或 XLSX），contenteditable 应该足够了。但是，如果您希望将更改保存在服务器上（您应该将其添加到您的问题中），则需要使用 AJAX。根据表的结构，有多种方法可以做到这一点。不幸的是，在没有看到您代码的相关部分的情况下，我无法提供更实质性的建议。
@FiddlingAway 我没有提到我想将文件保存在服务器上，因为我已经处理过它，实际上我是用 PHP 来处理的。我尝试下载并重复使用 CSV 文件，但它开始变得一团糟，因为当用户打开页面时，最初加载的文件是 Javascript 格式的，因为它们是由后端脚本以这种方式生成的。关于contenteditable，你认为我可以通过使用cell.setAttribute("contenteditable", "true")之类的东西来添加这个属性吗？我的疑问仍然是如何将其保存在 Javascript 结构化文件中

标签： javascript web-applications download web-development-server tabulator

【解决方案1】：

最后我决定继续创建一个自定义文件格式化程序来生成一个 Javascript 文件。代码是：

//custom file formatter
var jsFileFormatter = function(list, options, setFileContents, mimeType){
  //list - an array of export rows representing one row of data for the table;
  //options - the options object passed from the download function
  //setFileContents - function to call to pass the formatted data to the downloader

  var fileContents = [];
  var first_row = true;
  var jsConstructorFields = ["  {field1:"", "", field2:"", "", field3:"", "", field4:"", "", field5:"", "", field6:""];

  fileContents.push("var tabledata = [
");
  //iterate over rows
  list.forEach((row) => {
    var item = [];
    var field_cnt = 0;

    if (first_row==false) {
      //iterate over the columns in a row
      row.columns.forEach((col) => {
          if(col){
              item.push(jsConstructorFields[field_cnt]);
              item.push(col.value);
              field_cnt++
          }
      });

      // End of row
      item.push(""},
");
      fileContents.push(item.join(''));
    } else {
      first_row=false;
    }
  });

  fileContents.push("];");
  //trigger file download, passing the formatted data and mime type
  setFileContents(fileContents, "text/plain");
}

使用此格式化程序的下载可以使用以下方式触发：

  table.download(jsFileFormatter, "file.csv");

【讨论】：