记录vue和element-ui导出表格到excell

1.安装插件

npm install ‘file-saver‘
npm install ‘xlsx‘

2.引入插件

import FileSaver from ‘file-saver‘
import XLSX from ‘xlsx‘

3.定义方法

exportForms(){
            let xlsxParam = {raw:true};
            let wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
            //outtable是表格对应的id
            let wbout = XLSX.write(wb,{
                bookType:"xlsx",
                bookSST:true,
                type:"array"
            })
            try{
                FileSaver.saveAs(
                    new Blob([wbout],{type:"application/octet-stream;charset=utf-8"}),
                    "数据详情.xlsx"   //导出的文件名称
                )
            }catch (e) {
                if(typeof  console !== "undefined"){
                    console.log(e,wbout)
                }
            }
            return wbout;
        }

提示!!

如果进行了分页只能导出第一页的数据

如果要导出所有的数据,需要单独写一个表,然后display:none导出这个所有数据的表就可以,亲测有效

记录vue和element-ui导出表格到excell

上一篇:Comet ASP.NET AJAX 示例


下一篇:主题美化