使用 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

我认为您可以创建一个这样的方法，假设您的 Vue 组件中csvdata有一个可访问的数据属性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();
}