其他分享
首页 > 其他分享> > 记录vue和element-ui导出表格到excell

记录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导出这个所有数据的表就可以,亲测有效

标签:wbout,xlsx,插件,vue,XLSX,导出,element,excell,let
来源: https://www.cnblogs.com/wcq520/p/15098239.html