vue封裝html轉成excel · 常用筆記

# vue封裝html轉成excel ``` <pre class="calibre15">``` let dateFormat \= function (timer) { const dt \= new Date(timer) const y \= dt.getFullYear() const m \= (dt.getMonth() + 1 + '').padStart(2, '0') const d \= (dt.getDate() + '').padStart(2, '0') const hh \= (dt.getHours() + '').padStart(2, '0') const mm \= (dt.getMinutes() + '').padStart(2, '0') const ss \= (dt.getSeconds() + '').padStart(2, '0') return `${y}\-${m}\-${d} ${hh}:${mm}:${ss}` } let html\_excel \= function (tableData, fileName, callback) { let tableInnerHTML \= '' let headerData \= \['部門', '名稱', '編號', '等級', '貨位', '固定資產'\] let bodyData \= tableData //表格數據 tableInnerHTML += ''; //頭部部分開始拼接！ tableInnerHTML += `` + "程序員的將來" + "" tableInnerHTML += '' headerData.forEach(item \=> { tableInnerHTML += "" + item + "" }) tableInnerHTML += ''; //頭部部分結束 tableInnerHTML += '' //身體部分開始 bodyData.forEach(item \=> { tableInnerHTML += "" tableInnerHTML += "" + item.id + "" tableInnerHTML += "" + item.name + "" tableInnerHTML += "" + item.province + "" tableInnerHTML += "" + item.num + "" tableInnerHTML += "" + item.level + "" tableInnerHTML += "" + item.huowei + "" tableInnerHTML += "" + item.status + "" tableInnerHTML += "" }) tableInnerHTML += ''; //身體結束 function getExplorer() { var explorer \= window.navigator.userAgent; if (explorer.indexOf('MSIE') \>= 0) { return 'ie'; // ie } else if (explorer.indexOf('Firefox') \>= 0) { return 'Firefox'; // firefox } else if (explorer.indexOf('Chrome') \>= 0) { return 'Chrome'; // Chrome } else if (explorer.indexOf('Opera') \>= 0) { return 'Opera'; // Opera } else if (explorer.indexOf('Safari') \>= 0) { return 'Safari'; // Safari }; }; if (getExplorer() !== 'Safari' && fileName.substr(\-1, 4) !== '.xls') { fileName += '.xls'; } if (getExplorer() \=== 'ie') { var curTbl \= table; var oXL \= new ActiveXObject('Excel.Application'); var oWB \= oXL.Workbooks.Add(); var xlsheet \= oWB.Worksheets(1); var sel \= document.body.createTextRange(); sel.moveToElementText(curTbl); sel.select(); sel.execCommand('Copy'); xlsheet.Paste(); oXL.Visible \= true; try { let fname \= oXL.Application.GetSaveAsFilename('Excel.xls', 'Excel Spreadsheets (\*.xls), \*.xls'); } catch (e) { print('Nested catch caught ' + e); } finally { oWB.SaveAs(fname); // oWB.Close(savechanges = false); oXL.Quit(); oXL \= null; idTmr \= setInterval(Cleanup(), 1); } } else { tableToExcel(tableInnerHTML, fileName, callback); /\*在這調用下面的一個方法，傳入拼接完成的表格，文件名，回調函數。該方法是干嘛的請往下看\*/ } } function Cleanup() { window.clearInterval(idTmr); } let tableToExcel \= (function () { let template \= '{table}'; let format \= function (s, c) { return s.replace(/{(\\w+)}/g, function (m, p) { return c\[p\]; }); }; return function (table, name, callback) { let ctx \= { worksheet: name || 'Worksheet', table: table }; let blob \= new Blob(\[format(template, ctx)\]); let a \= document.createElement('a'); a.href \= URL.createObjectURL(blob); a.download \= name; //這里這個name就是對應的文件名！ a.click(); a.remove(); callback('success'); /\*這里調用我們自己傳入的回調方法，這樣導出Excel完成后你就能在外面知道導出完畢，并且再往下做自己其他的邏輯\*/ }; })(); export { dateFormat, html\_excel } ``` ```