vue 前端匯出 excel

npm install xlsx-js-style

import XLSX from 'xlsx-js-style';

//匯出資料
exportD(title,data,fileName){
title=["標題1","標題2","標題3","標題4","標題5","標題6"];
data=[["資料1","資料2","資料3","資料4","資料5","資料6"],
["資料1","資料2","資料3","資料4","資料5","資料6"],
["資料1","資料2","資料3","資料4","資料5","資料6"]
];
fileName = "測試前端匯出"
// 建立一個新的工作簿
const wb = XLSX.utils.book_new();

// 建立帶樣式的表格資料
const headers =title;
// 設定字型大小和顏色 表頭居中
const headerStyle = {
font: { sz: "14"},
fill: { fgColor: { rgb: "c7c7c7" } },
alignment:{vertical:'center',horizontal:'center' }
};
//將樣式加入表頭
const headerRows = [
headers.map((header) => ({ v: header, s: headerStyle }))
];
// 將資料轉換為工作表
const ws_header = XLSX.utils.aoa_to_sheet(headerRows);
//設定寬度
const cols=[];
title.forEach(item =>{
cols.push({wch:20})
})
ws_header["!cols"]=cols
// 應用樣式
XLSX.utils.sheet_add_aoa(ws_header, headerRows, {origin: "A1"});
// 可以選擇為內容設定預設樣式
const defaultStyle = { font: { sz: "12" } }; // 設定預設字型大小
XLSX.utils.sheet_add_aoa(ws_header, data, {origin: "A2", cell: defaultStyle});
// 將工作表新增到工作簿
XLSX.utils.book_append_sheet(wb, ws_header, "Header");
// 寫入檔案
XLSX.writeFile(wb, fileName+".xlsx");

}