1、前端直接导出excel

xlsx安装

<code>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

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

}

}