XLSX和FileSaver实现element单个表格导出excel & 多sheet合并导出excel

1. 安装XLSX和FileSaver 并引入

2. 创建表格，id命名

3. 单个表格导出excel

/**
*@params id: 目标表格的id
*@params title: 导出excel的名称
*/
function toExcel(id,title){
 //拷贝目标表格
    let table= document.getElementById(id).cloneNode(true)
 //如果表格有固定列，要移除，否则会导致-表格数据会重复导出
    table.removeChild(table.querySelector('.el-table__fixed'))
    // table.removeChild(table.querySelector('.el-table__fixed-right'))
    // table.removeChild(table.querySelector('.el-table__fixed-left'))
 //导出数据使用未加工的-raw设置为true
    let wb = XLSX.utils.table_to_book(table,{raw:true})
 //生成一个excel薄
    let wbout = XLSX.write(wb,{booktype:'xlsx',bookSST:true,type:'array'})
 //保存excel薄
    try{
        FileSaver.saveAs(
        new Blob([wbout],{type:'application/octet-stream'}),
        title+'.xlsx'
    	)
       }catch(e){
           console.log(e,wbout)
       }
    return wbout
    }

4. 多sheet合并导出excel

/**
*@params sheetIdList: 目标表格的id列表（包含idName,sheetName）
*@params title: 导出excel的名称
*/
function toSheets(sheetIdList,title){
 //新建一个book
    let workbook = XLSX.utils.book_new()
    sheetIdList.forEach((item)=>{
      //拷贝目标表格
    	let table= document.getElementById(item.idName).cloneNode(true)
      //如果表格有固定列，要移除，否则会导致-表格数据会重复导出
    	table.removeChild(table.querySelector('.el-table__fixed'))
    	// table.removeChild(table.querySelector('.el-table__fixed-right'))
    	// table.removeChild(table.querySelector('.el-table__fixed-left'))
        let workSheet = XLSX.utils.table_to_sheet(table,{raw:true})
        XLSX.utils.book_append_sheet(workbook,ws,item.sheetName)
    })
 //生成一个excel薄
    let wbout = XLSX.write(wb,{booktype:'xlsx',bookSST:true,type:'array'})
 //保存excel薄
    try{
        FileSaver.saveAs(
        new Blob([wbout],{type:'application/octet-stream'}),
        title+'.xlsx'
    	)
       }catch(e){
           console.log(e,wbout)
       }
    return wbout
}