使用 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 函数应该是什么样子的？

原文由 vesii 发布，翻译遵循 CC BY-SA 4.0 许可协议

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();
}

原文由 j3py 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是在 vue 中下载 csv 文件的工作代码

此示例代码将对象数组转换为带有标题的完美 csv 文件，调用函数 exportCSVFile(headers, items, fileTitle)

headers = { name: ‘Name’ // 格式化列名, age: ‘Age’ }

items = [ { name: ‘Joo’, age: 21 }, { name: ‘ant’, age: 20 } ]

文件名 = ‘somefilename.csv’

 function convertToCSV(objArray) {
  const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
  let str = '';
  for (let i = 0; i < array.length; i++) { // eslint-disable-line
    let line = '';
    for (const index in array[i]) { // eslint-disable-line
      if (line !== '') line += ',';
      line += array[i][index];
    }
    str += line + '\r\n'; // eslint-disable-line
  }
  return str;
}

function exportCSVFile(headers, items, fileTitle) {
  if (headers) {
    items.unshift(headers);
  }
  const jsonObject = JSON.stringify(items);
  const csv = convertToCSV(jsonObject);
  const exportedFilenmae = fileTitle + '.csv' || 'export.csv'; // eslint-disable-line
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  if (navigator.msSaveBlob) { // IE 10+
    navigator.msSaveBlob(blob, exportedFilenmae);
  } else {
    const link = document.createElement('a');
    if (link.download !== undefined) {
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', exportedFilenmae);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

export default exportCSVFile;

如果给定值是二维数组，只需使用此函数

function downloadCSVData () {
    var array = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
    ];
    var str = '';
    for (var i = 0; i < array.length; i++) {
    let line = '';
    line = array[i].join(",");
    str += line + '\r\n';
    }
    var blob = new Blob([str], { type: 'text/csv;charset=utf-8;' });

    var link = document.createElement('a');
    var url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', 'csvfilename.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

原文由 chans 发布，翻译遵循 CC BY-SA 4.0 许可协议