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中下载csv文件的工作代码

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

标题= { name：'Name'//格式化的列名，年龄：“年龄” }

项目= [ { 名称：“ Joo”，年龄：21 }， { 名称：“ ant”，年龄：20 } ]

filename ='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;

如果给定值为2d数组，则只需使用此函数

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

Answer 2

我认为您可以创建类似的方法，假设csvdata是Vue组件中this可访问的数据属性：

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

Answer 3

将数组转换为文本。（let data = [[1,2,3], [4,5,6], [7,8,9]].join('\r\n').toString()）
将文本转换为base64。（let encoded_data = btoa(data)）
创建一个iFrame并设置其src =编码数据。 let iframe = document.createElement('iframe'); iframe.src = "data:application/octet-stream;base64," + encoded_data
将iframe附加到文档正文中：document.body.appendChild(iframe)。

这种方法有一些缺点：

内容安全策略可以阻止第4步。您可以控制页面中的CSP，但不要为了简单代码而牺牲安全性。
该文件将始终被命名为“下载”，没有文件扩展名。

一种更好的方法是在服务器上创建一个临时文件，并向用户提供该文件的链接。

使用Vue和JS下载文件CSV

3 个答案: