javascript - 以 Angular 方式将 json 导出到 xlsx

Question

我正在尝试将 json 导出到 xlsx。我可以导出它，但是在 Excel 文件中没有获得正确的格式。

这是我的代码:

downloadFile() {
 let  Obj =  {
    "data": [12,123],
    "date": ["2018-10-10","2018-02-10"]
  }
  const items = [];
  items['data'] = Obj.data;
  items['date'] = Obj.date;
  const header = Object.keys(items);
  let csv;
  header.map((data)=>{
  csv = this.items[data];
  });
  csv.unshift(header.join(','))
  let csvArray = csv.join('\r\n');
  var blob = new Blob([csvArray], { type: 'text/csv' })
  FileSaver.saveAs(blob, "filename" + ".xlsx");
}

我得到的O/p:[“数据，日期”，“2018-10-10”，“2018-02-10”]

我无法在 Excel 中呈现日期值

我导出的 Excel 文件的屏幕截图:

Answer 1

您需要如下所示的内容。为了将数据放在一列中，将日期放在一列中，您必须以一种方式构建数据，以便在按列排列时，它会按照您想要的方式显示。下面是一个示例，您可以尝试下载，它将按预期工作。一个更简单的解决方案是创建一个隐藏的 html 表，其中的数据与您想要导出的结构相似，然后将其转换为 CSV。

function downloadFile() {
  let Obj = {
    "data": [12, 123],
    "date": ["2018-10-10", "2018-02-10"]
  }
  const items = [];
  items[0] = Object.keys(Obj);
  items[1] = [Obj.data[0], Obj.date[0]];
  items[2] = [Obj.data[1], Obj.date[1]];
  let csvContent = '';
  items.forEach((rowArray) => {
    let row = rowArray.join(",");
    csvContent += row + "\r\n";
  });
  console.log(csvContent)
}

downloadFile();

下面是如何将 HTML 表格下载到 CSV 的示例。当您使用 Angular 时，您可以使用“*ngFor”从数据创建一个表。

function toCsv() {
  const csv = [];
  const rows = document.getElementById('table').querySelectorAll("tr");

  for (let i = 0; i < rows.length; i++) {
    let row = [];
    const cols = rows[i].querySelectorAll("td, th");
    for (var j = 0; j < cols.length; j++) {
      row.push(cols[j].innerText);
    }
    csv.push(row.join(","));
  }
  console.log(csv.join('\r\n'));
}

table {
  display: none;
}

<table id="table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Geronimo</td>
    <td>26</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Natalia</td>
    <td>19</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>Silvia</td>
    <td>32</td>
    <td>Russia</td>
  </tr>
</table>
<button onclick="toCsv()">Export HTML table to CSV file</button>

使用 Filesaver 将这些 CSV 字符串下载到文件中。

希望这有帮助:)