foreword

Share a Vue front-end method to export Excel files. Record learning!

Functional requirements : Export all the data in the table to Excel format file
Front end : Vue3+Element-Plus

This export method is all front-end operations, and the back-end only needs to pass in table data to the front-end (basic multi-table query, using inner joins)

1. Realization

1. Pages

insert image description here

2. Code

2.1 Core method

/**
 * 表格数据导出Excel实际方法
 * @param list
 */
const exportList = (list) => {
    
    
  //表格表头,导出表头
  let tableHeader = [['#', '资产编号', '资产名称', '资产类别', '资产型号', "资产单价", "资产金额",
    "生产厂家", "生产日期", "购买日期", "购买人", "状态", "库存数量"]]
  list.forEach((item, index) => {
    
    
    let rowData = []
    //导出内容的字段
    rowData = [
      index + 1,
      item.zcbh,
      item.zcmc,
      item.name,
      item.zcxh,
      item.zcdj,
      item.zcje,
      item.sccj,
      currencyFormatDate(item.scrq),
      currencyFormatDate(item.gmrq),
      item.gmr,
      item.sts,
      item.kcsl,
    ]
    tableHeader.push(rowData)
  })
  let wb = XLSX.utils.book_new()
  let ws = XLSX.utils.aoa_to_sheet(tableHeader)
  XLSX.utils.book_append_sheet(wb, ws, '资产设备基本信息') // 工作簿名称
  XLSX.writeFile(wb, '资产设备基本信息.xlsx') // 保存的文件名
}

Encapsulate this export method separately, with a parameter, that is, the List collection of all the data that needs to be exported, then you can use it by passing the parameter when calling.

tableHeader defines the header of the table (it is not very strict here, because it also contains the data of the table, which is temporarily empty and will be passed in later when traversing).
rowData is an array of table specific data content, which is passed in when traversing.
tableHeader.push(rowData) Put the content into tableHeader to form complete table data.
let wb = XLSX.utils.book_new() defines a table instance.
let ws = XLSX.utils.aoa_to_sheet(tableHeader) Create a workbook and put the table content into the workbook.

2.2 Call method

/**
 * 表格数据导出Excel调用方法
 */
const exportExcel = () => {
    
    
  ElMessageBox.confirm(
          '确定导出资产设备基本信息表吗？',
          '提示',
          {
    
    
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
  )
          .then(async () => {
    
    
            let list = [];
            const res = await request.get("asset/listAll");
            console.log(res)
            list = res.data.assetsAllList
            exportList(list);
            if (res.data.code === 200) {
    
    
              ElMessage({
    
    
                type: 'success',
                message: '即刻开始下载',
              })
            }
          })
          .catch(() => {
    
    
          })
}

await request.get(“asset/listAll”) requests the backend interface and gets the result.
Assign the collection in the result to the pre-defined list array list = res.data.assetsAllList.
Use the MessageBox message box, according to your actual needs
Asynchronous waiting is used, the request.get above is the axios method encapsulated by itself

3. Demo

insert image description here

Finish

The above is all the content, welcome to discuss, record learning!

Vue front-end table export Excel file