1.安裝插件：

npm install vue-json-excel

2.min.js中引入使用：

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

3.直接在頁面中使用

??<download-excel? :fetch=?"fetchData"?:fields="json_fields"? ?name="交易明細(xì).xls"??>

????????????????<el-button? type="primary">導(dǎo)出excel</el-button>

????????????</download-excel>

fetchData : 導(dǎo)出的列表數(shù)據(jù)?

json_fields : 表頭對應(yīng)字段?

name : 導(dǎo)出表格的名字

? ?例 ：? ? ?json_fields:?{

????????????????"門店名稱":?"StoreName",????//常規(guī)字段

????????????????"門店類型":?"StoreTypeName",?

????????????????"訂單號":?"OrderId",?

????????????????}

4.修改表格樣式

因為列表中由數(shù)字組成的長字符串被轉(zhuǎn)成科學(xué)計數(shù)法所以

在node_modules 中找到

//Data

??????xlsData?+=?"<tbody>";

??????data.map(function(item,?index)?{

????????xlsData?+=?"<tr>";

????????for?(let?key?in?item)?{

??????????xlsData?+=?"<td?style=\"mso-number-format:'\\@'\">"?+?_self.valueReformattedForMultilines(item[key])?+?"</td>";

????????}

????????xlsData?+=?"</tr>";

??????});

??????xlsData?+=?"</tbody>";

大概在164行 在 <td> 中 添加? style=\"mso-number-format:'\\@'\"

5.效果圖如下

時間 訂單 顯示正常。