vue + elementUI 实现表格的打印和下载

这篇文章主要介绍前端根据 table 表格里面已有的数据实现的下载功能，不需要调用接口，只是纯前端的一个功能实现；顺便介绍一下打印功能。

1、打印

获取表格数据，调用 window 的 print 方法；打印结束之后刷新页面重新给表格赋值。

<template><div><el-button @click="printTable">打印表格</el-button><el-table id="myTable" :data="tableData"><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template>
export default {data(){return {tableData:[{date:'xxxx',name:'aaaa',address:'ssss'}]}},methods:{//打印页面内容printTable(){let wpt = document.querySelector('#myTable');let newContent = wpt.innerHTML;let oldContent = document.body.innerHTML;document.body.innerHTML = newContent;window.print(); //打印方法// window.localtion.reload();history.go(0)document.body.innerHTML = oldContent;}}
}

2、下载

需要借助插件 xlsx 和 file-saver ；
安装插件：

//各种电子表格格式的解析器和编写器
npm install xlsx
npm install file-saver --save

实现方法：

<template><div><el-button @click="downloadExcel">下载表格</el-button><el-table id="myTable" :data="tableData"><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {data(){return {tableData:[{date:'xxxx',name:'aaaa',address:'ssss'}]}},methods:{//导出ExcelexportToExcel () {//获取 table 表格数据let et = XLSX.utils.table_to_book(document.querySelector('#myTable')); //此处传入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;}}
}

这种方法实现的下载只能下载当前table表格展示的数据；如果有分页，

vue + elementUI 实现表格的打印和下载相关推荐

Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
vue+elementui查询表格数据页面卡死问题
一问题描述 vue+elementui项目,本地idea启动,功能测试没问题,部署到tomcat服务器,查询表格数据,正确返回后,页面卡死. 浏览器console栏有vue warn信息:you m ...
vue+element-ui实现表格编辑
三种实现方式 1.表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前 ...
vue+elementUI 显示表格指定列合计数据
明确需求下图来自elementUI官网根据合计行数据的来源可以分为两种情况: 接口返回的数据只有表格中对应每个ID的数据,最后一行的合计是由前端来计算的表格中的合计行数据是从接口中返回的,不是由 ...
Vue elementui 实现表格selection的默认勾选
需求:弹出一个选择框,表格有勾选框,数据填充后,某些行设置默认勾选. 如下图: 数据填充后默认是不勾选的,如果要勾选某些行,通过toggleRowSelection this.$refs.zttabl ...
vue element-ui导出表格的功能，csv文件格式
下载插件 npm install xlsx --save npm install file-saver --save 引入 import FileSaver from 'file-saver' imp ...
Vue Element-ui Table表格排序
一.表格中有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可. <el-table-columnprop="d ...

vue + elementUI 实现表格的打印和下载

1、打印

2、下载

vue + elementUI 实现表格的打印和下载相关推荐

最新文章

热门文章