Vue el-table导出数据报表-导出全部数据
一、使用
1、安装以下npm包(示例):
npm install 'file-saver'
npm install 'xlsx'
2、在vue中引入库(示例):
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
2.方法
使用是,直接引入一下js代码即可:
如果表格做了分页,只能导出当前页数据。
function 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;
}
3.扩展使用
1、数据分页情况下全部导出数据:
在表格分页情况下,需要导出全部数据,需在html中重新添加表格并隐藏,将这个表格作为隐式的导出组件。
2、数据多选导出数据:
数据都选导出类似全部导出,将勾选的数据插入至隐式数据表格中,导出即可。