vue+element-ui 实现导出功能

148 阅读1分钟

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;
},