Vue realizes downloading data from the backend to excel, detailed version of vue-json-excel

Foreword:         

        The front end combines the data from the back end, and then triggers the download of excel, using vue-json-excel to realize the function.

Steps for usage:

1. Installation:

npm install vue-json-excel

2. Register in main.js

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

3. Use on the vue page

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
    })

}

Problems encountered by personal use:

When the backend returns with 0 in it, it will lose 0, return 005555, and only 5555 on the downloaded document

Solution:

Add the symbol ~ in front of the data, which is the symbol of the template string

hotelId:`'${one.hotelId}`,

Official api: click me

Name	Type	describe	default
data	Array	The data to export.
fields	Object	Fields in the JSON object to export. If not provided, all properties in JSON will be exported.
export-fields (exportFields)	Object	Used to solve problems with other components using variable fields, such as vee-validate. exportFields works exactly like fields
type	string	File extension type [xls, csv]	xls
name	string	The filename to export.	data.xls
header	string/Array	The title of the data. Can be a string (one title) or an array of strings (multiple titles).
title(deprecated)	string/Array	Same as Heading, Heading is maintained for retro-compatibility purposes, but its use is deprecated due to conflicts with the HTML5 heading attribute.
footer	string/Array	Data footer. Can be a string (one footer) or an array of strings (multiple footers).
default-value (defaultValue)	string	Used as a fallback when a row has no field value.	''
worksheet	string	The name of the worksheet tab.	'Sheet1'
fetch	Function	Callback to fetch data before downloading, and if set, will run immediately after the mouse is pressed and before the download process. Important: only works if no data props are defined .
before-generate	Function	Callback for methods called before generating/fetching data, e.g. to show loading progress
before-finish	Function	The callback of the method that is called before the download box pops up, for example: hide the loading progress
stringifyLongNum	Boolean	String long numbers and decimals (to solve the problem of loss of precision in numbers), default value: false
escapeCsv	Boolean	This will escape the CSV values ​​so it fixes some excel issues with numeric fields. But this will wrap each csv data with ="and" to avoid you having to set this property to false. Default: True