使用 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的CSVData function 應該是什么樣子？

Answer 1

我認為您可以創建一個this的方法，假設csvdata是您的 Vue 組件中可以訪問的數據屬性：

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

Answer 2

1. 將數組轉換為文本。 ( let data = [[1,2,3], [4,5,6], [7,8,9]].join('\r\n').toString() )
2. 將文本轉換為 base64。 （ let encoded_data = btoa(data) ）
3. 創建一個 iFrame 並設置其 src = 編碼數據。 let iframe = document.createElement('iframe'); iframe.src = "data:application/octet-stream;base64," + encoded_data
4. Append iframe 到文檔的正文： document.body.appendChild(iframe) 。

但是，這種方法有一些缺點：

1. 內容安全策略可以阻止第 4 步。您可以控制頁面中的 CSP，但不要為了簡單的代碼而犧牲安全性。
2. 該文件將始終命名為“下載”，沒有文件擴展名。

更好的方法是在服務器上創建一個臨時文件並為用戶提供該文件的鏈接。

Answer 3

這是在 vue 中下載 csv 文件的工作代碼

此示例代碼將對象數組轉換為帶有標題的完美 csv 文件調用 function 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

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