El front-end exporta directamente archivos de Excel, ¡súper simple! ! ! .

Prefacio: Exportar Excel en el desarrollo front-end puede requerir la cooperación del servidor, o puede tomar los datos directamente y exportar la tabla de Excel directamente a través de js-export-excel, por lo que el estilo y muchas cosas no se pueden definir, pero sí. De hecho, es posible exportar y descargar los datos en local.

1. Importar dependencia js-export-excel

npm: npm instala js-export-excel

hilo: hilo agregar js-export-excel

2. Empaquetar en herramientas para su uso.

En utilidades, complete la encapsulación de su herramienta. La encapsulación aquí simplemente filtra los datos entrantes y los encabezados de la lista. Puede establecer sus propias condiciones según la situación. dayjs se puede eliminar directamente, aquí solo importo el nombre entrante más la hora actual. Tipo de archivo .ts,

Código completo:

/**
*  @param data 数据源
*  @param colums 对应数据字段名
*  @param titleData Excel对应表头字段
*  @param name 导出表名
*/
import dayjs from 'dayjs';
import ExportJsonExcel from 'js-export-excel'
export const exportExcel: any = (data: any, colums: any, titleData: any, name: any) => {
    // 数据重构方法
    const newa = (value: any) => {
        for (let i in value) {
            // 数据为空则修改为 '--'
            if (!value?.[i]) {
                value[i] = '--'
            }
            // 筛选并格式化时间数据 
            else if( String(value?.[i])?.includes('+08:00')) {
                value[i] = new Date(value[i]).toLocaleString()
            }
        }
        return value
    }

    // 获取最新数据
    let newdata: any = []
    data?.forEach((item: any) => {
        //调用数据重构方法，将空值或者时间数据格式化
        newdata?.push(newa(item))
    })

    // 排除 操作和物料图片
    const TitleData=titleData?.filter((item: any)=>item!=='操作'&&item!=='物料图片')
    // 去掉空值
    const newCloums=colums?.filter((item:any)=>item)
    let option:any ={};
    option.fileName=name+dayjs().format('YYYY-MM-DD HH-mm-ss');
    option.datas=[
        {
            sheetData:newdata||[],
            sheetName:name,
            sheetFilter:newCloums,
            sheetHeader:TitleData,
            columnWidths:[10,10,10,10,10,10,10,10,10,10,10,10,10,]

        }
    ]
    var toExcel= new ExportJsonExcel(option);
    toExcel.saveExcel();
    return {
        exportExcel
    }
}

Cómo utilizar la página:

Herramienta de importación:

importe {exportExcel} desde "@/utils/export_excel" Utilice su propia ruta real.

Definir llamada al método:

// 导出excel文件 这个我页面中点击事件调用的方法
function excelfile() {
  const colum: any = []
  const titleData: any = []
  // 我这里是循环出的自己数组
  colums.forEach((item) => {
    colum.push(item?.prop)
    titleData.push(item?.label)
  })
  //newData格式如下 真实数据 newData=[{name:'人间月',sex:'不明',age:'18'}]
  //colum格式如下  对应数据中的字段 colum=['name','sex','age']
  //titleData格式如下 列表头名   titleData=['姓名'，'性别','年龄']
  exportExcel(newData, colum, titleData, '日志管理列表')
}

Efecto de descarga:

 Formato de apertura de lista:

 Error de problema: si encuentra los siguientes problemas, no se puede encontrar la plantilla

 Cree un archivo Excel.d.ts en su archivo src. El contenido del archivo es solo una frase:

declare module 'js-export-excel'