vue 前端將一個list物件匯出成excel
阿新 • • 發佈：2021-06-22
vue 前端 將一個list匯出成excel
話不多說：程式碼
/* *匯出到excel（表頭可自定義） \* @param {string} filename 檔名稱 \* @param {object} val 匯出的資料 \* @param {string} excelTitle 匯出的列頭集合 */ export3Excel = function (filename, val, excelTitle) { var explorer = ''; //瀏覽器型別 if (!!window.ActiveXObject || "ActiveXObject" in window) explorer = 'ie'; //IE瀏覽器匯出 if (explorer == 'ie') { var arrData = typeof val != 'object' ? JSON.parse(val) : val; try { var oXL = new ActiveXObject("Excel.Application"); //建立AX物件excel } catch (e) { alert("無法啟動Excel，請確保電腦中已經安裝了Excel!\n\n如果已經安裝了Excel，" + "請調整IE的安全級別。\n\n具體操作：\n\n" + "工具 → Internet選項 → 安全 → 自定義級別 → ActiveX 控制元件和外掛 → 對未標記為可安全執行指令碼的ActiveX 控制元件初始化並執行指令碼 → 啟用 → 確定"); } var oWB = oXL.Workbooks.Add(); //獲取workbook物件 var oSheet = oWB.ActiveSheet; //啟用當前sheet var Lenr = arrData.length; //取得表格行數 for (var i = 0; i < excelTitle.length; i++) { oSheet.Cells(1, i + 1).value = excelTitle[i].value; //賦值 } for (var i = 0; i < Lenr; i++) { var td = 0; for (var j = 0 ;j< excelTitle.length;j++) { oSheet.Cells(i + 2, td + 1).value = arrData[i][excelTitle[j].key]; //賦值 td++; } } oXL.Visible = true; var fname = oXL.Application.GetSaveAsFilename(filename + ".xls", "Excel Spreadsheets (*.xls), *.xls"); oWB.SaveAs(fname); oWB.Close(); oXL.Quit(); } //非IE瀏覽器匯出 else { var arrData = typeof val != 'object' ? JSON.parse(val) : val; var excel = '<table>'; var row = "<tr>"; for (var i = 0; i < excelTitle.length; i++) { row += "<td>" + excelTitle[i].value + "</td>"; } excel += row + "</tr>"; for (var i = 0; i < arrData.length; i++) { var row = "<tr>"; for (var j = 0 ;j< excelTitle.length;j++) { var td = arrData[i][excelTitle[j].key]; if(td==null||td == undefined){ td = ''; } row += "<td>" + td + "</td>"; } excel += row + "</tr>"; } excel += "</table>"; var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' " + "xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel'; excelFile += '; charset=UTF-8">'; excelFile += "<head>"; excelFile += "<!--[if gte mso 9]>"; excelFile += "<xml>"; excelFile += "<x:ExcelWorkbook>"; excelFile += "<x:ExcelWorksheets>"; excelFile += "<x:ExcelWorksheet>"; excelFile += "<x:Name>"; excelFile += "sheet"; excelFile += "</x:Name>"; excelFile += "<x:WorksheetOptions>"; excelFile += "<x:DisplayGridlines/>"; excelFile += "</x:WorksheetOptions>"; excelFile += "</x:ExcelWorksheet>"; excelFile += "</x:ExcelWorksheets>"; excelFile += "</x:ExcelWorkbook>"; excelFile += "</xml>"; excelFile += "<![endif]-->"; excelFile += "</head>"; excelFile += "<body>"; excelFile += excel; excelFile += "</body>"; excelFile += "</html>"; if ('msSaveOrOpenBlob' in navigator) { var blob = new Blob([excelFile], { type: "application/vnd.ms-excel" }); window.navigator.msSaveOrOpenBlob(blob, filename + ".xls"); } else { var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile); var link = document.createElement("a"); link.href = uri; link.download = ""; link.style = "visibility:hidden"; //匯出檔名 link.download = filename + ".xls"; document.body.appendChild(link); link.click(); document.body.removeChild(link); } } }
例：
var exceltitle = [{`
key:"name",value:"名字"
}]
呼叫：
this.export3Excel(
"表格名",
data,//要匯出的資料
this.excelTitle //表頭
)`