在Vue中實(shí)現(xiàn)把網(wǎng)頁(yè)的數(shù)據(jù)導(dǎo)出到Excel的方法

<style lang="less">
</style>
<template>
 <div>
 <h3>這是一個(gè)使用iview的table組件，做展示用，你當(dāng)然可以在自己的項(xiàng)目里用自己想要的任何table組件</h3>
 <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>

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方法