前言:最近项目有个需求——前端实现导出excel的功能,今天我来给大家分享一下
(1)首先需要导入插件:
npm install xlsx --save //xlsx插件
npm install file-saver //file-saver插件
(2)接着在页面中引入:
(3)设置table元素的id名为‘table’
(3)编写具体的导出方法:
具体代入如下:
import {
ref,
reactive,
defineExpose
} from 'vue'
import * as XLSX from 'xlsx'
import FileSaver from "file-saver";
const exportClick = () => {
// 设置当前日期
let time = new Date();
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
let name = year + "" + month + "" + day;
// 通过id,获取导出的表格数据
const wb = XLSX.utils.table_to_book(document.getElementById("table"), {
raw: true,
});
const wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: "application/octet-stream",
}),
name + ".xlsx"
);
} catch (e) {
console.log(e);
}
return wbout;
};
</script>