快捷導(dǎo)航

vue3前端導(dǎo)出excel表格的兩種實現(xiàn)方法

更新時間：2024年11月26日 10:19:06 作者：可愛的秋秋啊

這篇文章主要給大家介紹了關(guān)于vue3前端導(dǎo)出excel表格的兩種實現(xiàn)方法,文中通過代碼以及圖文介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下

1、前端直接導(dǎo)出excel

xlsx安裝

npm install --save xlsx file-saver

xlsx引入

// 局部引入
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'

// 在main.js中引入XLSX

import XLSX from 'xlsx'
Vue.use(XLSX)

導(dǎo)出函數(shù)定義

// XLSX需要npm 安裝后全局或者局部引入后使用
// 導(dǎo)出Excel
const exportExcel = () => {
  const xlsxParams = { row: true }
  // 根據(jù)表格導(dǎo)出  可以根據(jù)json數(shù)據(jù)導(dǎo)出 json_to_sheet
  const wb = XLSX.utils.table_to_book(
    document.querySelector('#out-table'),
    xlsxParams
  )
  // 寫入
  const wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })

  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: 'application/octet-stream' }),
      '物料庫存信息.xlsx'
    )
  } catch (e) {
    if (typeof consloe !== 'undefined') {
      ElMessage.error({
        message: e.wbout,
        type: 'error'
      })
    }
  }
  return wbout
}

注意：如果導(dǎo)出的表格數(shù)據(jù)量繁多，我們可以在里面添加延時函數(shù)進行導(dǎo)出

2、調(diào)用后端接口導(dǎo)出excel

// 引入axios
import axios, { AxiosRequestConfig } from "axios"

// 導(dǎo)出
const exportExcels=()=>{
    if (formData.uuid != '' || formData.uuid != 'undefined') {
        axios({
            url: '/pm/pmEmployeeEvaluation/exportExcel',
            method: 'post',
            responseType: 'blob', // 設(shè)置響應(yīng)類型為 blob
            data: {
                uuid: formData.uuid // 根據(jù)需要傳遞的參數(shù)進行調(diào)整
            }
        })
            .then(res => {
                const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=UTF-8' });
                const fileName = "績效考核.xlsx"
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement("a")
                link.href = url;
                link.setAttribute("download", fileName);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            }).catch(error => {
                console.error('Error:', error);
            });
        // const fileUrl = "http://10.1.22.31:9771/pm/pmEmployeeEvaluation/notoken/exportExcel?uuid=" +  formData.uuid; // 文件的URL
        // window.location.href = fileUrl;
    }else{
        ElMessage('當(dāng)前暫無excel導(dǎo)出！?。?)
    }
}

直接調(diào)用定義好的接口，不單個引入 axios