vue页面table导出excel

最新推荐文章于 2024-09-09 21:45:52 发布

luuu7

最新推荐文章于 2024-09-09 21:45:52 发布

阅读量1.7k

点赞数 6

本文链接：https://blog.csdn.net/luuu7/article/details/107555979

版权

页面中显示的table表格，经常会要求实现导出Excel的需求，项目中刚好遇到，实现起来也比较简单，记录一下。

1.这里主要需要两个依赖：xlsx file-saver：

1	npm install xlsx --save

1	npm install file-saver --save

2.组件中引入

1 2	import FileSaver from 'file-saver' import XLSX from 'xlsx'

3.组件中导出Excel的方法

//导出Excel
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table-content')); //此处传入table的DOM节点
    let etout = XLSX.write(et, { 
    	bookType: 'xlsx', 
    	bookSST: true, 
    	type: 'array' 
    });
    try {
    	FileSaver.saveAs(new Blob([etout], { 
    		type: 'application/octet-stream' 
    	}), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
    } catch (e) {
        console.log(e, etout) ;
    }
    return etout;
}

4.导出按钮执行exportToExcel方法即可

1	<el-button @click="exportToExcel">导出</el-button>

5.打印页面部分内容的实现方法

//打印页面内容
printContent(){
    let wpt = document.getElementById('table-content');
    let newContent = wpt.innerHTML;
    let oldContent = document.body.innerHTML;
    
    document.body.innerHTML = newContent;
    window.print(); //打印方法
    window.localtion.reload();
    document.body.innerHTML = oldContent;
}

方法的实现很容易理解，打印的体验也比较好，妙！