前言

分享一個(gè)Vue前端導(dǎo)出Excel文件的方法。記錄學(xué)習(xí)！

功能需求：將表格的全部數(shù)據(jù)導(dǎo)出Excel格式的文件
前端：Vue3+Element-Plus

這個(gè)導(dǎo)出方法全部為前端操作，后端只需要傳入表格數(shù)據(jù)到前端即可（基礎(chǔ)的多表查詢，用的內(nèi)連接）

一、實(shí)現(xiàn)

1. 頁面

2.代碼

2.1 核心方法

/**
 * 表格數(shù)據(jù)導(dǎo)出Excel實(shí)際方法
 * @param list
 */
const exportList = (list) => {
  //表格表頭,導(dǎo)出表頭
  let tableHeader = [['#', '資產(chǎn)編號', '資產(chǎn)名稱', '資產(chǎn)類別', '資產(chǎn)型號', "資產(chǎn)單價(jià)", "資產(chǎn)金額",
    "生產(chǎn)廠家", "生產(chǎn)日期", "購買日期", "購買人", "狀態(tài)", "庫存數(shù)量"]]
  list.forEach((item, index) => {
    let rowData = []
    //導(dǎo)出內(nèi)容的字段
    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, '資產(chǎn)設(shè)備基本信息') // 工作簿名稱
  XLSX.writeFile(wb, '資產(chǎn)設(shè)備基本信息.xlsx') // 保存的文件名
}

將這個(gè)導(dǎo)出方法單獨(dú)封裝出來，帶一個(gè)參數(shù)，即需要導(dǎo)出的所有數(shù)據(jù)的List集合，那么在調(diào)用的時(shí)候傳參即可使用。

1. tableHeader 定義表格的表頭（此處并不是很嚴(yán)謹(jǐn)，因?yàn)檫€包含了表格的數(shù)據(jù)，暫時(shí)為空，后面遍歷時(shí)傳入）。
2. rowData 是表格具體數(shù)據(jù)內(nèi)容的數(shù)組，遍歷時(shí)傳入。
3. tableHeader.push(rowData) 將內(nèi)容放入tableHeader中，形成完整的表格數(shù)據(jù)。
4. let wb = XLSX.utils.book_new() 定義表格實(shí)例。
5. let ws = XLSX.utils.aoa_to_sheet(tableHeader) 創(chuàng)建工作簿，將表格內(nèi)容放入工作簿。

2.2 調(diào)用方法

/**
 * 表格數(shù)據(jù)導(dǎo)出Excel調(diào)用方法
 */
const exportExcel = () => {
  ElMessageBox.confirm(
          '確定導(dǎo)出資產(chǎn)設(shè)備基本信息表嗎？',
          '提示',
          {
            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(() => {
          })
}

1. await request.get(“asset/listAll”) 請求后端接口，拿到結(jié)果。
2. 將結(jié)果中的集合賦值給提前定義好的list數(shù)組list = res.data.assetsAllList。
3. 用了MessageBox消息彈框，根據(jù)自己的實(shí)際需求哈
4. 用到了異步等待，上面的request.get是自己封裝的axios方法

3.演示

結(jié)束

以上為全部內(nèi)容，歡迎討論，記錄學(xué)習(xí)！文章來源地址http://www.zghlxwxcb.cn/news/detail-423145.html

到了這里，關(guān)于Vue前端表格導(dǎo)出Excel文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！