vue3 前端导出excel表格

1、前端直接导出excel

• xlsx安装

  npm install --save xlsx file-saver

  • xlsx引入

    // 局部引入import * as XLSX from 'xlsx'import FileSaver from 'file-saver'// 在main.js中引入XLSXimport XLSX from 'xlsx'Vue.use(XLSX)

    • 导出函数定义 

      // XLSX需要npm 安装后全局或者局部引入后使用// 导出Excelconst 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

      // 引入axiosimport 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导出！！！')    }}