平时我们做后台项目的时候需要做列表的导出功能,有一种列表导出是纯前端导出,另一种列表导出则是需要调用后端的导出接口
我这边演示的都是vue3的格式
1、纯前端导出Excel表格
(1)、首先下载 js-export-excel
npm install js-export-excel;
(2)、引入(main.js引入或者第3步的js里引入都可以)
import ExportJsonExcel from "js-export-excel";
(3)、单独封装成一个js,建一个exportExcel.js(很多地方都用得到)
import ExportJsonExcel from "js-export-excel";
const downExcel = (dataTable, name) => {
let option = {}; // option代表的就是excel文件
option.fileName = name; //excel文件名
//excel文件数据
let headerList = Object.keys(dataTable[0]);
option.datas = [
{
// excel文件的数据源
sheetData: dataTable,
// excel文件sheet的表名
sheetName: "sheet",
// excel文件表头名
sheetHeader: headerList,
// excel文件列名
sheetFilter: headerList,
},
];
// 创建ExportJsonExcel实例对象
let toExcel = new ExportJsonExcel(option);
// 调用保存方法
toExcel.saveExcel();
}
export {
downExcel
}
(4)、使用,在你需要的页面引用exportExcel.js文件
<template>
<div @click="uploadExcel">我要导出数据</div>
</template>
<script setup>
import { downExcel } from "./exportExcel"; //根据你的项目实际路径引入
import { reactive } from 'vue'
const state = reactive ({
list:[ //这个是要导出的模拟数据
{name: '张三', sex: '男', age: '18'},
{name: '李四', sex: '男', age: '30'},
{name: '王五', sex: '男', age: '25'}
]
})
const uploadExcel = () => {
let dataTable = []
if (state.list?.length === 0){
//如果数据为空可以给个错误提示
return
}
for (const i of state.list) {
let obj = {
'姓名': i.name,
'性别': i.name,
'年龄': i.name
};
dataTable.push(obj); // 设置excel每列获取的数据源
}
downExcel(dataTable, '人员数据')
}
</script >
2、调后端接口导出
(1)、注意接口的返回类型为:responseType: ‘blob’
(2)、转换二进制的方法封装成一个js
const downBlob = (data, filePath) => {
let blob = new Blob([data], {
type: "application/octet-stream; charset=UTF-8"
})
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = filePath
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
}
export {
downBlob
}
(3)、接口请求
import { downBlob} from "./exportExcel"; //根据你的项目实际路径引入
// 导出数据
const exportTable = () => {
DOC_API.docMemberExport(parmas).then(res => {
downBlob(res, '学习统计.xls')
})
}