vue 实现element-UI中el-table数据导出excel

1.安装相关依赖

npm install --save xlsx file-saver

2.在需要导出excel的组件里面引入

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

3.

在methods中写入如下方法

exportExcel() {
            var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
            var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable为列表id
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
                "sheetjs.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
        },

template里有关表格内容如下

导出
        
            
            
            
            
            
            
            
            
             
            
            
            
            
            
             
            
            
                
            
        

 

你可能感兴趣的:(vue 实现element-UI中el-table数据导出excel)