前言:
前端将后端传来的数据进行一个组合,然后触发下载 excel ,使用vue-json-excel来实现功能。
使用步骤:
1、安装:
npm install vue-json-excel
2、main.js中注册
import Vue from "vue";
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);
3、vue页面上使用
1/template:
<download-excel
v-if="downloadExcelShow"
class = "export-excel-wrapper"
:data="json_data"
:fields = "json_fields"
name = "酒店导入失败明细.xlsx">
<el-button type="text" style="font-size: 14px">下载失败结果</el-button>
</download-excel>
2/data
downloadExcelShow:true,
//导出excel
json_fields: {
"酒店Code": "hotelId", //常规字段
"服务顾问姓名":"userAccountId",
"服务顾问联系方式":"telephone",
"失败原因":"errorReason",
},
json_data:[],
3/methods
fetchData(){
this.json_data = arr //后端接口拿到的数据赋值
this.downloadExcelShow=false
this.$nextTick(()=>{
this.downloadExcelShow=true
})
}
个人使用遇到的问题:
当后端返回里面带有0的时候,会丢失掉0,返回005555,到下载的文档上只有 5555
解决办法:
在数据前方加上 ~ 这个符号,也就是模板字符串的符号
hotelId:`'${one.hotelId}`,
官方api:点我
Name | Type | 描述 | 默认 |
---|---|---|---|
data | Array | 要导出的数据. | |
fields | Object | 要导出的JSON对象中的字段。如果没有提供,JSON中的所有属性都将被导出. | |
export-fields (exportFields) | Object | 用于解决使用变量字段的其他组件的问题,如vee-validate。exportFields的工作原理与字段完全相同 | |
type | string | 文件扩展类型 [xls, csv] | xls |
name | string | 要导出的文件名. | data.xls |
header | string/Array | 数据的标题。可以是字符串(一个标题)或字符串数组(多个标题)。 | |
title(deprecated) | string/Array | 与标题相同,标题是出于追溯兼容性的目的而维护的,但由于与HTML5标题属性冲突,不建议使用它. | |
footer | string/Array | 数据的页脚。可以是字符串(一个页脚)或字符串数组(多个页脚). | |
default-value (defaultValue) | string | 当行没有字段值时用作回退. | '' |
worksheet | string | 工作表选项卡的名称. | 'Sheet1' |
fetch | Function | 在下载之前回调以获取数据,如果设置了回调,则会在按下鼠标后和下载过程之前立即运行。 重要提示:只有在未定义数据道具的情况下才有效 . |
|
before-generate | Function | 在生成/获取数据之前调用方法的回调,例如:显示加载进度 | |
before-finish | Function | 在下载框弹出之前调用方法的回调,例如:隐藏加载进度 | |
stringifyLongNum | Boolean | 字符串长数字和小数(解决数字精度损失的问题),默认值:false | |
escapeCsv | Boolean | 这将转义CSV值,以便修复数字字段中的一些excel问题。但这将用=“and”包装每个csv数据,以避免您必须将此属性设置为false。默认值:True |