vue实现将后端传来的数据下载excel，vue-json-excel详细版

前言：         

        前端将后端传来的数据进行一个组合，然后触发下载  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:


    下载失败结果
  


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