JavaScript 匯出csv

AccountNull發表於2024-09-06
JavaScript

1. 修改指定列為中文

可以透過遍歷資料物件，將需要轉換為中文的欄位值替換為中文顯示。

2. 刪除不需要的列

可以在匯出資料之前，刪除不需要的列（例如 id 列）。

示例程式碼

exportAsCSV() {
  // 原始資料
  const data = [
    { id: 1, name: 'John Doe', age: 28, job: 'Engineer' },
    { id: 2, name: 'Jane Smith', age: 22, job: 'Designer' }
  ];

  // 處理資料，轉換為中文並去掉 id 列
  const processedData = data.map(item => {
    return {
      姓名: item.name,  // 將 name 列改為中文"姓名"
      年齡: item.age,    // 將 age 列改為中文"年齡"
      職位: item.job    // 將 job 列改為中文"職位"
    };
  });

  // 轉換為 CSV 格式
  const csvData = this.convertToCSV(processedData);
  
  // 匯出 CSV 檔案
  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  const url = URL.createObjectURL(blob);
  
  link.href = url;
  link.setAttribute('download', 'data.csv');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 將物件陣列轉換為 CSV 字串
convertToCSV(objArray: any[]): string {
  const array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
  let str = '';
  
  // 獲取並拼接表頭
  const header = Object.keys(array[0]).join(',');
  str += header + '\r\n';
  
  // 獲取並拼接資料行
  for (let i = 0; i < array.length; i++) {
    let line = '';
    for (const key in array[i]) {
      if (line != '') line += ',';
      line += array[i][key];
    }
    str += line + '\r\n';
  }
  return str;
}

相關文章