iview的表格有自己的导出功能，但是没有设置导出样式的功能。所以结合js原生导出功能对iview的表格进行了封装。
export const exportExcel = (table, name)=>{
let tableHtml;
if(table.$refs){
let header=table.$refs.header.querySelector('table').innerHTML;
let body=table.$refs.body.querySelector('tbody').outerHTML;
tableHtml=header+body;
}else {
tableHtml=table.innerHTML;
}
let uri = 'data:application/vnd.ms-excel;base64,',
template = `<html>
<head><meta charset="UTF-8"></head>
<body><table border="1">${tableHtml}</table></body>
</html>`;
let a=document.createElement('a');
a.href=uri + window.btoa(unescape(encodeURIComponent(template)));
a.download=name;
a.click();
document.removeChild(a);
};
原生js导出会保留页面显示的表格所有样式，包括行宽，文字和背景颜色等等。
放到自己的工具js里面,import进来就可以直接使用。
第一个参数是iview表格的ref对象或者是原生table，第二个参数是导出后的文件名称。
网友评论