Vue项目中将table组件导出Excel表格以及打印页面内容
2024-10-03 18:22:31
体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html
页面中显示的table表格,经常会要求实现导出Excel的需求,项目中刚好遇到,实现起来也比较简单,记录一下。
1.这里主要需要两个依赖:xlsx、
file-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…
最新文章
- C# dynamic 动态创建 json
- SVN更新报错
- Python处理json格式的数据文件(一些坑、一些疑惑)
- HOG特征提取分析(转)
- bzoj 2821 分块处理
- 了解Objective-C中NSAutoreleasePool使用方法
- js 用window.open(参数) 打开新窗口,在新窗口怎么获取传过来的参数
- 关于MySQL中使用LOAD DATA INFILE导入csv文件时的日期格式问题
- php中引用符号(&;amp;)的使用详解
- malloc和free的区别
- SharePoint RBS 安装(集成Office Web Apps)
- java基础练习 8
- IIS环境下部署项目
- C语言解析17monipdb.dat(http://www.ipip.net/)免费数据库
- iserver频繁崩溃、内存溢出事故解决小记
- css设置点击态样式
- vue-devtools chrome 开发工具
- MySQL累积求和
- mysql备份数据库出错mysqldump: [ERROR] unknown option &#39;--no-beep&#39;
- django之创建第3个项目:编写第一个模板文件
热门文章
- bzoj2152: 聪聪可可 树分治
- 棋盘分割(二维区间DP)
- C# 格式化一些知识点
- POJ 1426 Find the Multiple 思路,线性同余,搜索 难度:2
- maven中jar、war、pom的区别
- Javascript中的prototype与继承
- (转)List<;T>;的各种排序方法
- LaTeX 之 \label 的运用
- springboot整合mybatis增删改查(二):springboot热部署
- 20155313 2016-2017-2 《Java程序设计》第八周学习总结