Vue se da cuenta de la descarga de datos desde el backend a excel, versión detallada de vue-json-excel

Prefacio:         

        El front-end combina los datos del back-end y luego activa la descarga de Excel, usando vue-json-excel para realizar la función.

Pasos para el uso:

1. Instalación:

npm install vue-json-excel

2. Regístrate en main.js

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

Vue.component("downloadExcel", JsonExcel);

3. Usar en la página de 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
    })

}

Problemas encontrados por uso personal:

Cuando el backend regresa con 0, perderá 0, devolverá 005555 y solo 5555 en el documento descargado

Solución:

Agregue el símbolo ~ delante de los datos, que es el símbolo de la cadena de plantilla

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

API oficial: haz clic en mí

Nombre	Tipo	describir	por defecto
datos	Formación	Los datos a exportar.
campos	Objeto	Campos en el objeto JSON a exportar. Si no se proporciona, se exportarán todas las propiedades en JSON.
campos de exportación (exportFields)	Objeto	Se utiliza para resolver problemas con otros componentes mediante campos variables, como v-validate. exportFields funciona exactamente como campos
tipo	cadena	Tipo de extensión de archivo [xls, csv]	xls
nombre	cadena	El nombre de archivo a exportar.	datos.xls
encabezamiento	cadena/matriz	El título de los datos. Puede ser una cadena (un título) o una matriz de cadenas (múltiples títulos).
título (obsoleto)	cadena/matriz	Al igual que Heading, Heading se mantiene con fines de retrocompatibilidad, pero su uso está obsoleto debido a conflictos con el atributo de encabezado de HTML5.
pie de página	cadena/matriz	Pie de página de datos. Puede ser una cadena (un pie de página) o una matriz de cadenas (múltiples pies de página).
valor predeterminado (valor predeterminado)	cadena	Se utiliza como respaldo cuando una fila no tiene un valor de campo.	''
hoja de cálculo	cadena	El nombre de la pestaña de la hoja de cálculo.	'Hoja1'
buscar	Función	Devolución de llamada para obtener datos antes de la descarga y, si está configurado, se ejecutará inmediatamente después de presionar el mouse y antes del proceso de descarga. Importante: solo funciona si no se definen accesorios de datos .
antes de generar	Función	Devolución de llamada para métodos llamados antes de generar/obtener datos, por ejemplo, para mostrar el progreso de carga
antes de terminar	Función	La devolución de llamada del método que se llama antes de que aparezca el cuadro de descarga, por ejemplo: ocultar el progreso de carga
stringifyLongNum	booleano	Cadena de números largos y decimales (para resolver el problema de pérdida de precisión en los números), valor predeterminado: falso
escapeCsv	booleano	Esto escapará de los valores CSV, por lo que soluciona algunos problemas de Excel con campos numéricos. Pero esto envolverá cada dato csv con ="y" para evitar tener que establecer esta propiedad en falso. Valor predeterminado: verdadero