javascript - 使用 Vue 和 JS 下载 CSV 文件

Question

我有一个名为 csvdata 的字段，其中包含以下格式的数组:

[
    [1,2,3],
    [4,5,6],
    [7,8,9]
]

我正在尝试下载此数据的 CSV 文件。我正在使用 Vue，所以它看起来像:

<button type="button" class="btn btn-info action_btn" v-on:click="downloadCSVData">
      Download
</button>

downloadCSVData 函数应该是什么样子？

Answer 1

我认为您可以创建一个像这样的方法，假设 csvdata 是 Vue 组件中的 this 可以访问的数据属性:

downloadCSVData() => {
    let csv = 'Put,Column,Titles,Here\n';
    this.csvdata.forEach((row) => {
            csv += row.join(',');
            csv += "\n";
    });
 
    const anchor = document.createElement('a');
    anchor.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
    anchor.target = '_blank';
    anchor.download = 'nameYourFileHere.csv';
    anchor.click();
}