前言： 在做后臺(tái)管理的時(shí)候，我們往往有需要把網(wǎng)頁上面的數(shù)據(jù)導(dǎo)出到excel這樣的需求，真實(shí)的企業(yè)項(xiàng)目里對(duì)應(yīng)一些導(dǎo)出財(cái)務(wù)報(bào)表、員工信息、交易記錄、考勤打卡記錄…等等需求，本文將對(duì)此做探討。

開始前補(bǔ)充： 網(wǎng)上是有些牛人已經(jīng)把這個(gè)功能封裝成組件了，但每個(gè)人的封裝邏輯五花八門，組件的功能也很有限，不一定真能完全符合自己的業(yè)務(wù)需求，找相應(yīng)的API也很麻煩，存在不太敢用，不會(huì)用等問題，那么本文將教你如何自己封裝，如何自己自定義相關(guān)功能，如何自定義Excel的樣式 ，尤其是導(dǎo)出excel后自定義樣式，這在一些現(xiàn)存封裝好的組件是不好實(shí)現(xiàn)的，本文可以實(shí)現(xiàn)！

本文導(dǎo)出Excel方法的優(yōu)點(diǎn)： 網(wǎng)頁上的table與導(dǎo)出Excel之后的table完全獨(dú)立，也就是說你導(dǎo)出Excel之后的內(nèi)容與網(wǎng)頁沒有直接聯(lián)系，這意味著數(shù)據(jù)導(dǎo)出到Excel后有非常強(qiáng)的1定制性 ，實(shí)在不理解這句話也沒關(guān)系，本文看完你自然就明白了。2能跨瀏覽器兼容，甚至是某E瀏覽器。3導(dǎo)出非常快，不卡頓！

一、使用腳手架創(chuàng)建一個(gè)Vue項(xiàng)目，在生成的src目錄下創(chuàng)建exportToExcel.js文件(名稱自取), 并且到App.vue里面快速模擬生成一份表格數(shù)據(jù)

1、我這里簡(jiǎn)單模擬網(wǎng)頁上一份表格數(shù)據(jù)，使用的是iview的table組件，網(wǎng)頁上展示的表格的組件你可以用你自己喜歡的組件，我這里做演示用，你完全可以不跟我一樣；

<style lang='less'></style><template> <div> <h2>這是一個(gè)使用iview的table組件，做展示用，你當(dāng)然可以在自己的項(xiàng)目里用自己想要的任何table組件</h2> <Table :columns='column' :data='tableData'></Table> //iview的Table組件 <Button @click='toExcel'>導(dǎo)出表格數(shù)據(jù)到Excel</Button> //導(dǎo)出excel的按鈕 </div></template><script>import transform from ’./exportToExcel.js’ //這個(gè)方法來源于二步驟封裝的方法，往下看export default { name:’App’, //這是一個(gè)父組件，名稱為App.vue data(){ return { tableData:[], //表格數(shù)據(jù) column:[] //表格的列 } }, methods:{ toExcel(){ //調(diào)用我們封裝好的方法，傳3個(gè)參數(shù)過去，分別為：數(shù)據(jù)，文件名，回到函數(shù)(可根據(jù)自己需求決定回調(diào)是否需要) transform(this.tableData, ’我是文件名’, this.callback) }, callback(info){ console.log(info) } }, created(){ //模擬網(wǎng)絡(luò)請(qǐng)求 this.tableData = [ {index:1,name:’我是1號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:2,name:’我是2號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:3,name:’我是3號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:4,name:’我是4號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:5,name:’我是5號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:6,name:’我是6號(hào)’,age:18,sex:’女’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:7,name:’我是7號(hào)’,age:18,sex:’女’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:8,name:’我是8號(hào)’,age:18,sex:’女’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:9,name:’我是9號(hào)’,age:18,sex:’女’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:10,name:’我是10號(hào)’,age:18,sex:’女’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:11,name:’我是11號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:12,name:’我是12號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:13,name:’我是13號(hào)’,age:18,sex:’女’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:14,name:’我是14號(hào)’,age:18,sex:’女’,hobby:’web’,hair:’thick’,salaried:’99999999’}, {index:15,name:’我是15號(hào)’,age:18,sex:’男’,hobby:’web’,hair:’thick’,salaried:’99999999’} ] this.column = [ {key:’index’,title:’序號(hào)’,width:120}, {key:’name’,title:’姓名’,width:120}, {key:’age’,title:’年齡’,width:120}, {key:’sex’,title:’性別’,width:120}, {key:’hobby’,title:’愛好’,width:120}, {key:’hair’,title:’發(fā)量’,width:120}, {key:’salaried’,title:’薪水’,width:120} ] }}</script>

二、進(jìn)入exportToExcel.js文件，寫導(dǎo)出業(yè)務(wù)邏輯代碼，也就是上面對(duì)應(yīng)的transform這個(gè)方法

書寫思路：采用HTML字符串拼接的方法，拼接出一個(gè)table，即可顯示到Excel；換句話來說使用HTML的語法寫出來的table能展示到excel上面，還能攜帶樣式！請(qǐng)用心看完拼接過程，拼接看懂了，你會(huì)90%了！

var idTmr;//自己定義一個(gè)函數(shù)transform，在里面寫我們的業(yè)務(wù)邏輯function transform(table, name, callback) { //table為表格數(shù)據(jù),name為導(dǎo)出文件名, //callback為導(dǎo)出完畢回調(diào),方便你知道導(dǎo)出完成了(可根據(jù)自己需求決定是否需要) let tableInnerHTML = ’’ let headerData = [’序號(hào)’,’姓名’,’年齡’,’性別’,’愛好’,’發(fā)量’,’薪水’] let bodyData = table //這里對(duì)應(yīng)是表格數(shù)據(jù)，我們只需要傳過來即可 //拼接完全使用thead、tbody、tr、td、th，并且相應(yīng)的tr、th、td里可以寫一些類似colspan(決定占幾列) //rowspan(決定占幾行)的屬性、可以用作合并行、合并列等高級(jí)操作 tableInnerHTML += ’<thead><tr>’; //頭部部分開始拼接！ tableInnerHTML += `<th colspan=${headerData.length} style=’background:#CCFFFF;border:solid;’>` + '程序員的將來' + '</th></tr>' tableInnerHTML += ’<tr>’ headerData.forEach(item => { tableInnerHTML += '<th rowspan=’1’ style=’background:#FFFFCC;border:solid’>' + item + '</th>' }) tableInnerHTML += ’</tr></thead>’; //頭部部分結(jié)束 tableInnerHTML += ’<tbody>’ //身體部分開始 bodyData.forEach(item => { tableInnerHTML += '<tr>' tableInnerHTML += '<td align=’center’ style=’border:solid’>' + item.index + '</td>' tableInnerHTML += '<td align=’center’ style=’border:solid’>' + item.name + '</td>' tableInnerHTML += '<td align=’center’ style=’border:solid’>' + item.age + '</td>' tableInnerHTML += '<td align=’center’ style=’border:solid’>' + item.sex + '</td>' tableInnerHTML += '<td align=’center’ style=’border:solid’>' + item.hobby + '</td>' tableInnerHTML += '<td align=’center’ style=’border:solid’>' + item.hair + '</td>' tableInnerHTML += '<td align=’center’ style=’border:solid’>' + item.salaried + '</td>' tableInnerHTML += '</tr>' }) tableInnerHTML += ’</tbody>’; //身體結(jié)束//------------OK，到此為止拼接工作做完，也就是基本的數(shù)據(jù)已經(jīng)被拼接成表格了--------------------//tip開始(下面還有個(gè)tip結(jié)束的位置)/*-------從tip開始到tip結(jié)束的過程是判斷瀏覽器類型步驟，做兼容性處理！對(duì)于你來說你完全可以不用 深入理解這里面的邏輯，直接復(fù)制到自己的項(xiàng)目里去，不會(huì)存在任何瀏覽器兼容性的問題！*/ 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’ && name.substr(-1, 4) !== ’.xls’) { name += ’.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 {var 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, name, callback); /*在這調(diào)用下面的一個(gè)方法，傳入拼接完成 的表格，文件名，回調(diào)函數(shù)。該方法是干嘛的請(qǐng)往下看*/ } //tip結(jié)束} //此括號(hào)結(jié)束，我們自己封裝的transform方法也結(jié)束了！90%的邏輯完成了！/*下面的兩個(gè)函數(shù)對(duì)于你來說你也完全不用深入理解里面的邏輯，你只要知道，他是在幫助你做轉(zhuǎn)換，幫助你 將拼接好的HTML字符串模板真正地轉(zhuǎn)換并且輸出到Excel里面去，直接當(dāng)成固定書寫方法，直接拿來用即可*/function Cleanup() { window.clearInterval(idTmr);}let tableToExcel = (function () { let template = ’<html><head><meta charset='UTF-8'></head><body><table>{table}</table></body></html>’; 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; //這里這個(gè)name就是對(duì)應(yīng)的文件名！ a.click(); a.remove(); callback(’success’); /*這里調(diào)用我們自己傳入的回調(diào)方法，這樣導(dǎo)出Excel完成后你就能 在外面知道導(dǎo)出完畢，并且再往下做自己其他的邏輯*/ };})();export default transform; //導(dǎo)出自己封裝的transform方法

上效果：

三、封裝工作完成了，再回過頭來看 二 步驟在使用自己封裝的transform方法，只需要傳入需要導(dǎo)出的數(shù)據(jù)、文件名、回調(diào)即可，到這里你應(yīng)該理解了：

1、什么是網(wǎng)頁與Excel完全分離，因?yàn)槟鉋xcel只受你數(shù)據(jù)的影響，你傳過來什么數(shù)據(jù)它最終就根據(jù)你傳來的數(shù)據(jù)，拼接成你想要的表格，不受網(wǎng)頁影響（有些人封裝的導(dǎo)出Excel組件是和網(wǎng)頁密切關(guān)聯(lián)，首先肯定在網(wǎng)頁上需要有一份真正被渲染好的表格存在，然后再在對(duì)應(yīng)的地方使用對(duì)應(yīng)的接口，傳入對(duì)應(yīng)的屬性等等…不作過多探討），本文其實(shí)也在網(wǎng)頁上渲染了一份表格截圖給你們看了，但這完全是演示用，看到這里為止我相信你也完全相信，網(wǎng)頁上的表格如果我不需要，完全不用渲染，因?yàn)槲抑皇切枰臄?shù)據(jù)而已，只要接口返回了數(shù)據(jù)，那么我就調(diào)用封裝的transform方法傳入數(shù)據(jù)，即可開始導(dǎo)出excel2、導(dǎo)出Excel同時(shí)攜帶樣式，你返回步驟三看看我們?cè)谄唇觮d、tr、th的時(shí)候，我想要寫什么樣式直接像在HTML里寫內(nèi)聯(lián)樣式一樣，直接上style，在style里寫你想寫的樣式，什么背景顏色，字體，邊框，縮進(jìn)等等，自己去嘗試吧，很香的！3、在部分需求中可能有些高級(jí)操作導(dǎo)出的某列自身可能會(huì)占據(jù)（2列、3列、4列、…列），某行會(huì)占據(jù)（2行、3行、4行、…行)只需學(xué)習(xí)上面的寫法，設(shè)置colspan、rowspan屬性即可4、導(dǎo)出真的快，這點(diǎn)如果你沒有用過一些別人封裝好的導(dǎo)出Excel組件庫，你真的無法感受，你只需知道哪怕數(shù)據(jù)成百上千，使用這個(gè)方法導(dǎo)出真的流暢！！！！

四、最后補(bǔ)充，本文是在教你如何封裝將網(wǎng)頁上的數(shù)據(jù)導(dǎo)出到Excel的方法，不是在封裝組件！！！我們是在封裝一個(gè)方法，一個(gè)函數(shù)，這意味著什么？你完全可以不用在Vue里使用，哪怕是Jquery、React等其他前端框架，你只需要將封裝好的方法引入即可，不說了，太牛 * 了！！！

到此這篇關(guān)于在Vue里如何把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel 的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)導(dǎo)出到Excel 內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！