Método de implementación y principio de Vue exportando Excel

Resumen: este artículo presentará en detalle el método de exportación de Excel en el front-end Vue, incluido el uso de bibliotecas de terceros y la implementación pura del front-end. Al mismo tiempo, explica su principio y ayuda a los lectores a comprender cómo exportar archivos de Excel de manera eficiente en proyectos de Vue.

---

• Biblioteca de terceros:exceljs

exceljses una poderosa biblioteca de JavaScript capaz de crear, editar y exportar archivos de Excel en el front-end. Su principio es utilizar JavaScript puro para realizar el formato de archivo de Excel, generar la estructura de datos del archivo de Excel y convertirlo en un formato binario para su descarga.

Cómo exportar Excel:

Paso 1: Instalar exceljsla biblioteca

Use npm o yarn para instalar la biblioteca en el proyecto Vue exceljs:

npm install exceljs
或
yarn add exceljs

Paso 2: Importarexceljs

Importe la biblioteca en el componente que necesita exportar Excelexceljs :

import ExcelJS from 'exceljs';

Paso 3: Cree un libro de Excel, una hoja de trabajo y agregue datos Cuando sea necesario exportarlos, cree un nuevo libro de Excel, agregue una hoja de trabajo y agregue datos a la hoja de trabajo:

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

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

Paso 4: Exporte el archivo de Excel Codifique en binario el archivo de Excel generado y cree un enlace de descarga para que los usuarios lo descarguen:

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

---

• Implementación front-end pura

A veces no queremos introducir bibliotecas adicionales, y también podemos exportar Excel en el front-end puro en Vue . El principio de este método es convertir los datos en formato CSV y descargarlos como un archivo utilizando las funciones compatibles y del navegador .BlobURL.createObjectURL

Cómo exportar Excel:

Paso 1: Escriba una función de exportación Escriba una función de exportación en el componente Vue para convertir los datos en formato CSV y cree un enlace de descarga para que los usuarios los descarguen:

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

Paso 2: Llame a la función de exportación En el lugar que necesita exportar, llame a la función de exportación y pase los datos:

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

---

• método de importación

1. Instalar vue-json-excel

npm install vue-json-excel -S

2. Introducido en main.js

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

3. Uso en 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. Datos

• DetailsForm: los datos a exportar

• título: título de la tabla

• json_fields: El atributo dentro es el título de cada columna en la tabla de Excel. El nombre del atributo compuesto por varias frases (con espacios en el medio) debe agregarse entre comillas dobles; se descargan algunos datos en el json de la interfaz especificada. Si no especificado, todos los datos se exportarán por defecto centrar todos los 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. Efecto

 6. Algunos parámetros comunes

---

Si tiene alguna pregunta, deje un mensaje y responda por usted. ! !