体验更优排版请移步原文: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…

  

最新文章

  1. C# dynamic 动态创建 json
  2. SVN更新报错
  3. Python处理json格式的数据文件(一些坑、一些疑惑)
  4. HOG特征提取分析(转)
  5. bzoj 2821 分块处理
  6. 了解Objective-C中NSAutoreleasePool使用方法
  7. js 用window.open(参数) 打开新窗口,在新窗口怎么获取传过来的参数
  8. 关于MySQL中使用LOAD DATA INFILE导入csv文件时的日期格式问题
  9. php中引用符号(&amp;amp;)的使用详解
  10. malloc和free的区别
  11. SharePoint RBS 安装(集成Office Web Apps)
  12. java基础练习 8
  13. IIS环境下部署项目
  14. C语言解析17monipdb.dat(http://www.ipip.net/)免费数据库
  15. iserver频繁崩溃、内存溢出事故解决小记
  16. css设置点击态样式
  17. vue-devtools chrome 开发工具
  18. MySQL累积求和
  19. mysql备份数据库出错mysqldump: [ERROR] unknown option &#39;--no-beep&#39;
  20. django之创建第3个项目:编写第一个模板文件

热门文章

  1. bzoj2152: 聪聪可可 树分治
  2. 棋盘分割(二维区间DP)
  3. C# 格式化一些知识点
  4. POJ 1426 Find the Multiple 思路,线性同余,搜索 难度:2
  5. maven中jar、war、pom的区别
  6. Javascript中的prototype与继承
  7. (转)List&lt;T&gt;的各种排序方法
  8. LaTeX 之 \label 的运用
  9. springboot整合mybatis增删改查(二):springboot热部署
  10. 20155313 2016-2017-2 《Java程序设计》第八周学习总结