O Vue realiza o download de dados do back-end para o Excel, versão detalhada do vue-json-excel

Prefácio:         

        O front-end combina os dados do back-end e, em seguida, aciona o download do Excel, usando vue-json-excel para realizar a função.

Passos para uso:

1. Instalação:

npm install vue-json-excel

2. Registre-se em main.js

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

Vue.component("downloadExcel", JsonExcel);

3. Use na página 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 pelo uso pessoal:

Quando o back-end retornar com 0, ele perderá 0, retornará 005555 e apenas 5555 no documento baixado

Solução:

Adicione o símbolo ~ na frente dos dados, que é o símbolo da string do modelo

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

API oficial: clique em mim

Nome	Tipo	descrever	padrão
dados	Variedade	Os dados a serem exportados.
Campos	Objeto	Campos no objeto JSON a serem exportados. Se não for fornecido, todas as propriedades em JSON serão exportadas.
campos de exportação (exportFields)	Objeto	Usado para resolver problemas com outros componentes usando campos variáveis, como vee-validate. exportFields funciona exatamente como os campos
tipo	corda	Tipo de extensão de arquivo [xls, csv]	xls
nome	corda	O nome do arquivo a ser exportado.	dados.xls
cabeçalho	string/array	O título dos dados. Pode ser uma string (um título) ou uma matriz de strings (vários títulos).
título (obsoleto)	string/array	Assim como Heading, Heading é mantido para fins de retrocompatibilidade, mas seu uso é obsoleto devido a conflitos com o atributo de cabeçalho HTML5.
rodapé	string/array	Rodapé de dados. Pode ser uma string (um rodapé) ou uma matriz de strings (vários rodapés).
valor padrão (defaultValue)	corda	Usado como fallback quando uma linha não tem valor de campo.	''
planilha	corda	O nome da guia da planilha.	'Folha1'
buscar	Função	Callback para buscar dados antes do download e, se definido, será executado imediatamente após o mouse ser pressionado e antes do processo de download. Importante: só funciona se nenhum props de dados estiver definido .
antes de gerar	Função	Callback para métodos chamados antes de gerar/buscar dados, por exemplo, para mostrar o progresso do carregamento
antes de terminar	Função	O retorno de chamada do método que é chamado antes da caixa de download aparecer, por exemplo: ocultar o progresso do carregamento
stringifyLongNum	boleano	Seqüência de números longos e decimais (para resolver o problema de perda de precisão em números), valor padrão: falso
escapeCsv	boleano	Isso escapará dos valores CSV para corrigir alguns problemas do Excel com campos numéricos. Mas isso envolverá cada dado csv com ="e" para evitar que você defina essa propriedade como false. Padrão: Verdadeiro