Vue前端表格導出Excel文件的方法是什么

這篇文章主要介紹“Vue前端表格導出Excel文件的方法是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue前端表格導出Excel文件的方法是什么”文章能幫助大家解決問題。

1. 頁面

2.代碼

2.1 核心方法

/**
 * 表格數據導出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') // 保存的文件名
}

將這個導出方法單獨封裝出來，帶一個參數，即需要導出的所有數據的List集合，那么在調用的時候傳參即可使用。

1. tableHeader 定義表格的表頭（此處并不是很嚴謹，因為還包含了表格的數據，暫時為空，后面遍歷時傳入）。

2. rowData 是表格具體數據內容的數組，遍歷時傳入。

3. tableHeader.push(rowData) 將內容放入tableHeader中，形成完整的表格數據。

4. let wb = XLSX.utils.book_new() 定義表格實例。

5. let ws = XLSX.utils.aoa_to_sheet(tableHeader) 創建工作簿，將表格內容放入工作簿。

2.2 調用方法

/**
 * 表格數據導出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”) 請求后端接口，拿到結果。將結果中的集合賦值給提前定義好的list數組list = res.data.assetsAllList。用了MessageBox消息彈框，根據自己的實際需求哈用到了異步等待，上面的request.get是自己封裝的axios方法 

3.演示

關于“Vue前端表格導出Excel文件的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。