Método de implementação e princípio do Vue exportando o Excel

Resumo: Este artigo apresentará em detalhes o método de exportação do Excel no front-end Vue, incluindo o uso de bibliotecas de terceiros e implementação de front-end puro. Ao mesmo tempo, explica seu princípio e ajuda os leitores a entender como exportar arquivos Excel de forma eficiente em projetos Vue.

Biblioteca de terceiros:exceljs

exceljsé uma poderosa biblioteca JavaScript capaz de criar, editar e exportar arquivos Excel no front-end. Seu princípio é usar JavaScript puro para realizar o formato de arquivo Excel, gerar a estrutura de dados do arquivo Excel e convertê-lo em um formato binário para download.

Como exportar Excel:

Etapa 1: instalar exceljsa biblioteca

Use npm ou yarn para instalar a biblioteca no projeto Vue exceljs:

npm install exceljs
或
yarn add exceljs

Passo 2: Importarexceljs

Importe a biblioteca no componente que precisa exportar Excelexceljs :

import ExcelJS from 'exceljs';

Etapa 3: criar uma pasta de trabalho do Excel, planilha e adicionar dados Onde precisa ser exportado, crie uma nova pasta de trabalho do Excel, adicione uma planilha e adicione dados à planilha:

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');

// 假设data为要导出的数据数组
data.forEach((item, index) => {
  worksheet.addRow([item.name, item.age, item.email]);
});

Etapa 4: Exportar arquivo do Excel Codifique o arquivo Excel gerado em código binário e crie um link de download para os usuários baixarem:

workbook.xlsx.writeBuffer().then((buffer) => {
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'data.xlsx'; // 下载文件名
  link.click();
});

Implementação de front-end puro

Às vezes, não queremos introduzir bibliotecas adicionais e também podemos exportar o Excel em um front-end puro em Vue . O princípio deste método é converter os dados em formato CSV e baixá-los como um arquivo usando as funcionalidades suportadas e do navegador .BlobURL.createObjectURL

Como exportar Excel:

Etapa 1: Escreva uma função de exportação Escreva uma função de exportação no componente Vue para converter os dados em formato CSV e criar um link de download para os usuários baixarem:

exportExcel(data) {
  const csv = data.map(item => `${item.name},${item.age},${item.email}`).join('\n');
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'data.csv'; // 下载文件名
  link.click();
}

Passo 2: Chame a função de exportação No local que deseja exportar, chame a função de exportação e passe os dados:

// 假设data为要导出的数据数组
this.exportExcel(data);

método de importação

1. Instale vue-json-excel

npm install vue-json-excel -S

2. Introduzido em main.js

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3. Use no código

             
              <template>
              <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="需要导出的表格名字.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="success">导出</el-button>
              </download-excel>
              </template>

4. Dados

DetailsForm: os dados a serem exportados
título: título da tabela
json_fields: O atributo dentro é o título de cada coluna na tabela do excel. O nome do atributo composto por várias frases (com espaços no meio) deve ser adicionado entre aspas duplas; alguns dados no json da interface especificada são baixados. Se não especificado, todos os dados serão exportados por padrão . centralizar todos os campos

<script>
title: "xx公司表格",
 json_fields: {
        "排查日期":'date',
        "整改隐患内容":'details',
        "整改措施":'measure',
        "整改时限":'timeLimit',
        "应急措施和预案":'plan',
        "整改责任人":'personInCharge',
        "填表人":'preparer',
        "整改资金":'fund',
        "整改完成情况":'complete',
        "备注":'remark',
      },
    DetailsForm: [
        {
          date: "2022-3-10",
          details: "卸油区过路灯损坏",
          measure: "更换灯泡",
          timeLimit: "2022-3-21",
          plan: "先使用充电灯代替,贴好安全提醒告示",
          personInCharge: "王xx",
          preparer: "王xx",
          fund: "20元",
          complete: "已完成整改",
          remark: "重新更换了灯泡",
        },
       
      ],
</script>

5. Efeito

6. Alguns parâmetros comuns

Se você tiver alguma dúvida, deixe uma mensagem e responderemos para você! ! !