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="交易明细.xls" >
<el-button type="primary">导出excel</el-button>
</download-excel>
fetchData : 导出的列表数据
json_fields : 表头对应字段
name : 导出表格的名字
例 ： json_fields: {
"门店名称": "StoreName", //常规字段
"门店类型": "StoreTypeName",
"订单号": "OrderId",
}
4.修改表格样式
因为列表中由数字组成的长字符串被转成科学计数法所以
在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.效果图如下
时间 订单 显示正常。
