DataTables 导出到格式语法错误的 csv

Question

我有数据表，我尝试将其导出为 CSV。第 7 列是日期。

text: 'Csv',
      extend: 'csvHtml5',
      filename: "customers",
      exportOptions: {
        columns: [1, 2, 7,8],
       format: {
          body: function (data, row, column, node) {
            //check if type is input using jquery
            console.log(data)
            return $(data).is("input") ? $(data).val() : data;
          }
        }
      }

如果我不使用“格式”，一切正常，但使用格式时出现错误：

Uncaught Error: Syntax error, unrecognized expression: 13/11/2021

当我记录无格式的“数据”时，一切正常。看起来日期中的斜杠会在“格式”中出现问题。任何帮助:)

编辑：我从 firestore 获取的日期

let options = {
        year: 'numeric',
        month: '2-digit',
        day: 'numeric',
        //hour: 'numeric',
        // minute: 'numeric'
        // second: 'numeric'
      };
dataSet.push([
...
oc.data().created ? doc.data().created.toDate().toLocaleDateString("en-GB", options) : "",
...

Answer 1

这是由您的 jQuery $(data) 选择器引起的，当 data 变量包含一个或多个正斜杠时。参见：

可能还有其他人。

一种简单（但可能容易出错）的方法是编写如下逻辑：

// possible, but not recommended:
data.startsWith('<input') ? $(data).val() : data

您可以使用 DataTables 对 orthogonal data 的支持，而不是这种方法。

在这种新方法中，我们将以包含 <input> 字段的列为目标，并为该列指定这些数据值的两个不同版本：

我们要在table中显示的版本（即实际输入HTML）。
我们要导出的版本（即输入字段中包含的值）。

为此，我们必须为相关的一列（或多列）指定此项。在我的测试示例中，这是第二列 - 所以 col index 1:

columnDefs: [
  { 
    targets: [1], 
    render: function (data, type, row) {
      return type === 'export' ? $(data).val() : data;
    }
  }
]

在这里，我已经指定第二列将有一个名为 export 的自定义数据类型 - 它的值将是 $(data).val() 的结果 - 以及所有其他 built-in orthogonal data types (display, sort, filter) 将只使用原始 data 值。

现在我可以在 DataTable 的导出部分使用这个新的正交数据类型：

exportOptions: {
  columns: [0, 1, 4, 5],
  orthogonal: 'export'
}

使用我的测试数据的整体解决方案如下：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"/>

  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css"/> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td><input type="text" value="System Architect"></td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>13/11/2021</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td><input type="text" value="Accountant"></td>
                <td>Tokyo</td>
                <td>63</td>
                <td>14/12/2021</td>
                <td>0,750</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td><input type="text" value="Dev/Ops"></td>
                <td>New York</td>
                <td>27</td>
                <td>15/01/2022</td>
                <td>2,000</td>
            </tr>
        </tbody>
    </table>

</div>

<script>

$(document).ready(function() {

  var table = $('#example').DataTable( {
    columnDefs: [
      { 
        targets: [1], 
        render: function (data, type, row) {
          return type === 'export' ? $(data).val() : data;
        }
      }
    ],
    dom: 'Brftip',
    buttons: [ { 
      text: 'Csv',
      extend: 'csvHtml5',
      name: 'testExport',
      exportOptions: {
        columns: [0, 1, 4, 5],
        orthogonal: 'export'
      } 
    } ]
  } );

} );

</script>

</body>
</html>

table 看起来像这样：

导出的CSV数据为：

"Name","Position","Start date","Salary"
"Donna Snider","Dev/Ops","15/01/2022","2,000"
"Garrett Winters","Accountant","14/12/2021","0,750"
"Tiger Nixon","System Architect","13/11/2021","0,800"

好处：我不需要任何可能容易出错的逻辑来检测我的字符串是否包含 / 个字符，或者以 <input... 开头等等。

DataTables 导出到格式语法错误的 csv

DataTables export to csv with format Syntax error

datatables