Vue前端表格导出Excel文件的图文教程

/**
 * 表格数据导出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') // 保存的文件名
}

/**
 * 表格数据导出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(() => {
          })
}