vue3 前端导出excel表格

1、前端直接导出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)

• 导出函数定义 

// XLSX需要npm 安装后全局或者局部引入后使用
// 导出Excel
const exportExcel = () => {
  const xlsxParams = { row: true }
  // 根据表格导出  可以根据json数据导出 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
}

注意：如果导出的表格数据量繁多，我们可以在里面添加延时函数进行导出 

2、调用后端接口导出excel

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

// 导出
const exportExcels=()=>{
    if (formData.uuid != '' || formData.uuid != 'undefined') {
        axios({
            url: '/pm/pmEmployeeEvaluation/exportExcel',
            method: 'post',
            responseType: 'blob', // 设置响应类型为 blob
            data: {
                uuid: formData.uuid // 根据需要传递的参数进行调整
            }
        })
            .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('当前暂无excel导出！！！')
    }
}

直接调用定义好的接口，不单个引入 axios