Element-ui,Vue表格匯出生成Excel表

Vue+Element實現表單資料為Excel表

這可能是個經常見到的需求，但是實現還是很容易出問題的，首先看一下模板效果

生成的Excel表詳情如圖

在實現這個功能的時候需要兩個檔案，分別為Blob.js和Export2Excel.js檔案，百度網盤下載地址：連結: https://pan.baidu.com/s/1sXMEce5MbTOvgf1yFvd5IQ 密碼: qvi7 （有這兩個檔案），下載完成以後，建立一個新的資料夾Excel，將這兩個檔案放入此檔案中。

1. 將兩個檔案下載好以後，開啟Export2Excel.js，新增Blob.js的引用地址，如圖，我將兩個檔案放在了src下新建的excel的資料夾中，所以此處的地址可根據自己實際情況進行引用。此處路徑需謹慎，不然會報錯。
   
   我的資料夾結構展示
   

2.程式碼實現

<!--給相應的按鈕新增事件函式-->
<el-button @click="exportExcel()" type="danger" >匯出Excel</el-button>
<!--exportExcel事件使用方法-->
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel');   // 請求Export2Excel的檔案地址，
        const tHeader = ['交貨單', '客戶程式碼', '客戶名稱', '狀態', '付款金額','付款方式']; // tHeader的陣列中存放Excel表格的每一列的標題
        const filterVal = ['DocNum', 'CardCode', 'CardName',"State",'DocTotal','PayType']; 
        //filterVal 存放需要匯出到Excel表的欄位名
        // 上面的DocNum、CardCode、CardName是tableData裡物件的屬性
        const list = this.tableData;  //把data裡的tableData存到list
        const data = this.formatJson(filterVal, list);   //將資料寫入到Excel表中
        /*console.log(data);     */
        export_json_to_excel(tHeader, data, '銀行資料流水報表');   //生成Excel表的檔名
      })
    }

const { export_json_to_excel } = require(’@/excel/Export2Excel’); 這個地址容易出錯，需要參考專案檔案中build檔案下的webpack.base.conf.js中的 alias 的配置，如圖

其次在生成Excel表格的時候，某些欄位是動態的，這個例子中的欄位是“退款狀態”：State，需要做判斷，因此需要map陣列來實現，這樣巢狀不會

formatJson(filterVal, jsonData) {    //formatJson是存放匯出資料欄位的
      return jsonData.map(v => 
      	filterVal.map(
      		j => {
      		    //如果有需要做判斷的欄位條件，就做個判斷，如果不需要直接return v[j];即可
      			/*if(j=='State'){
      				//假如有三種狀態：已付款=1，未付款=-1，已退款=0
      				//return v[j]=='1'?'已付款':(v[j]=='-1'?'未付款':'已退款');//假如有三個狀態判斷條件，就這樣寫
      		    	return	v[j]=='-1'?'已退款':'已付款';
      				}else{
      				return v[j];
      			}*/
      			return v[j];
      		})      		
      );
    },