[Vue] Cómo descargar los datos de la tabla de el-table en un archivo de formato .xlsx en vue3

Instalar dependencias

Primero, debe instalar las bibliotecas xlsx y file-saver.

npm install xlsx file-saver --save

Si está interesado, puede leer las instrucciones oficiales de las dos bibliotecas y usarlas directamente a continuación no será un problema.

introducción oficial xlsx

SheetJS Community Edition ofrece soluciones de código abierto probadas en batalla para extraer datos útiles de casi cualquier hoja de cálculo compleja y generar nuevas hojas de cálculo que funcionarán tanto con software heredado como moderno.Extraiga datos
SheetJS Pro ofrece soluciones más allá del procesamiento de datos: edite plantillas complejas con facilidad; deje salir su Picasso interior con estilo; cree hojas personalizadas con imágenes/gráficos/tablas dinámicas; evalúe expresiones de fórmulas y transfiera cálculos a aplicaciones web; automatice tareas comunes de hojas de cálculo y mucho más SheetJS Pro ofrece soluciones más allá del procesamiento de datos :
edite fácilmente plantillas complejas; dé rienda suelta a su Picasso interior con estilo; cree hojas de trabajo personalizadas con imágenes/gráficos/tablas dinámicas; evalúe expresiones de fórmulas y transfiera cálculos a aplicaciones web; automatiza tareas comunes de hojas de cálculo y más !

documentación npm del protector de archivos

preparar datos

Prepare los datos de la tabla que desea exportar como una matriz bidimensional. Por ejemplo:

const data = tabelData.map((item: any) => {
    const arr: any[] = [];
    item.forEach((j: any) => {
      arr.push(j);
    });
    return arr;
  });

Definir método de exportación

Debe crear una función que procese los datos que preparó anteriormente y devuelva un blob de un archivo xlsx.

import * as XLSX from 'xlsx';

export const exportExcel = (data: any[]) => {
  // 创建一个空的工作簿
  const workbook = XLSX.utils.book_new();

  // 创建一个工作表
  const worksheet = XLSX.utils.aoa_to_sheet(data);

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 将工作簿转换为二进制数据流
  const excelData = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });

  // 将二进制数据流转换为 Blob 对象
  const blob = new Blob([excelData], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  });

  return blob;
};

descargar archivo

Finalmente necesita descargar el archivo, puede usar la función file-saveproporcionada en la instalación anteriorsaveAs

import { saveAs } from 'file-saver';

// 处理表格文件
const blob = exportExcel(data);
const fileName = `${item.file.name.split('.')[0]}.xlsx`;
// 下载
saveAs(blob, fileName);

ps: si se usa localmente, la descarga será normal pero el navegador informará una advertencia. Esto se debe a que usamos la descarga http localmente. Esto se puede ignorar. Esta advertencia no aparecerá en línea.

Referencias

xlsx npm document file-saver npm document vue3 importa la tabla elcel y la muestra (usando el complemento xlsx+vite+element-plus)/tabla de carga js (js+xlsx)