Vue项目中将table组件导出Excel表格以及打印页面内容


体验更优排版请移步原文http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html

 

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

1.这里主要需要两个依赖:xlsxfile-saver
 npm install xlsx --save
 npm install file-saver --save
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方法即可
<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; }


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

 

End…

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM