The front-end directly exports Excel files, super simple! ! ! .

Preface: Exporting Excel in front-end development may require the cooperation of the server, or you can directly take the data and export the Excel table directly through js-export-excel, so the style and many things cannot be defined, but it is indeed possible to export and download the data in local.

1. Import dependency js-export-excel

npm：npm install js-export-excel

yarn： yarn add js-export-excel

2. Package into tools for use

In utils, complete your tool encapsulation. The encapsulation here simply filters the incoming data and list headers. You can set the conditions according to the situation. dayjs can be removed directly. Here I just import the incoming name plus the current time. File type .ts,

Complete code:

/**
*  @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
    }
}

How to use the page:

Import tool:

import {exportExcel} from "@/utils/export_excel" Use your own real path.

Define method call:

// 导出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, '日志管理列表')
}

Download effect:

 List opening format:

 Problem error: If you encounter the following problems, the template cannot be found

 Please create an Excel.d.ts file under your src file. The content of the file is just one sentence:

declare module 'js-export-excel'