Export Table to Excel：Vue3 表格輸出成Excel

Export Table to PDF：Vue3 表格輸出成PDF｜jsPdf, jsPdf-autotable
Export Table to docx：Vue3 表格輸出成word

相比之下輸出成excel就簡單很多。

安裝

npm install xlsx --save

引入

import * as XLSX from "xlsx";

// items是資料陣列
const exportToExcel = (items) => {
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(items);
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // Sheet1是工作表頁籤名稱
  const excelBuffer = XLSX.write(workbook, {
    bookType: "xlsx",
    type: "array",
  });
  saveExcelFile(excelBuffer, `example.xlsx`);
};

const saveExcelFile = (buffer, filename) => {
  const data = new Blob([buffer], {
    type: "application/octet-stream",
  });
  const url = URL.createObjectURL(data);
  const link = document.createElement("a");
  link.href = url;
  link.setAttribute("download", filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

items的資料格式

[
  {name: 'Kai', gender: 'male', id: 1},
  {name: 'Jenny', gender: 'female', id: 2},
  {name: 'Lily', gender: 'female', id: 3},
  {name: 'Ray', gender: 'female', id: 4},
]

產出格式

headers想改為較能辨識的字串，可使用mapping

let mapping = {
  name: '姓名',
  gender: '性別',
  id: '編號',
}

const mappedItems= items.map(item => {
  const obj = {}
  for (const k in item) {
    if (mapping[k]) {
      obj[mapping[k]] = item[k]
    } 
  }
  return obj
})

console.log(mappedItems)

// console
[
  {姓名: 'Kai', 性別: 'male', 編號: 1},
  {姓名: 'Jenny', 性別: 'female', 編號: 2},
  {姓名: 'Lily', 性別: 'female', 編號: 3},
  {姓名: 'Ray', 性別: 'female', 編號: 4},
]

這樣就可以了。

當初知道要前端輸出資料時覺得相當害怕，沒想到隔了幾個月也幹出來了，真是以肉眼可見的速度在成長🥺🌟
轉職已經9個月了，跟去年相比真的有十足的進步，很高興自己有一點一點地記錄所學，有時候回望當時寫的面試考題筆記，都覺得並不是白費呢。