1,安装插件 npm i xlsx ,npm i file-saver
2,在utils里创建一个htmlToexcel.js文件
import FileSaver from "file-saver";
import *as XLSX from "xlsx";
const htmlToExcel = {
getExcel(dom,title='默认标题',){
const excelTitle = title;
const wb = XLSX.utils.table_to_book(document.querySelector(dom));
/* 获取二进制字符串作为输出 */
const wbout = XLSX.write(wb, {bookType: "xlsx", bookSST: true, type: "array"});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
excelTitle + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
};
export default htmlToExcel;
3,设置就一个按钮添加点击事件 并导入utils里设置好的js文件
//导出对话框保存按钮
exportExcel(){
htmlToExcel.getExcel('#selectTable','导出数据')
},
//导出点击事件
exportExcelSelect(){
// console.log(111)
if (this.Dialogtabledata.length < 1){
this.$message.error('请选择要导出的内容!');
return false;
}
this.dialogVisible = true;
},