elementUI+vue+printJs实现页面表格数据打印功能实例
作者：Asonys
打印功能是一个很普遍的需求,这两天我又遇到了,这篇文章主要介绍了elementUI+vue+printJs实现页面表格数据打印功能的相关资料,包括安装依赖、引用插件、设置打印区域div、绑定按钮事件加载全量数据并调用printJS方法,需要的朋友可以参考下
对接的是 print-js 插件
print-JS 官网文档地址：Print.js - Javascript library for HTML elements, PDF and image files printing.
1、elementUI页面数据已经开发完成，只需要直接引用对应printJs即可
可以先开发页面，最后实现打印功能即可
2、先安装printJs依赖
npm install print-js --save
3、在需要打印功能的vue页面文件内引用
import printJS from 'print-js'
4、在vue页面添加一个按钮，绑定点击事件printAll
<button @click="printAll">打印</button>
5、由于打印采用的是html类型，可以打印elementUI渲染的表格数据
可以给el-table外部加一个dive,然后给这个对应的div上面一个id，就是下面方法中下printable属性
<div id="printBox">
// 这里是<el-table>数据
<el-table>
</el-table>
</div>6、对应的JS单机事件方法
// 打印数据
async printAll() {
// 由于上面表格展示的数据分页了，这个地方可以加载全部数据，不分页
await this.getList();
// 打印js
printJS({
printable: 'printBox', //打印区域id
type: 'html', // 打印类型是html
header: '打印表头标题',
headerStyle: 'text-align:center; font-size:24px;',
footer: ' ',
maxWidth: 800, // 最大宽度
documentTitle: ' ',
scanStyles: false, // 自定义样式
// 直接在 style 中设置横向打印
style: '@media print {@page { size: A4 landscape; margin: 10mm 10mm 10mm 10mm;} body{zoom: 87%; margin:0mm 5mm 0mm 5mm;} tbody {text-align:center;border: 1px solid #000000;} th {border: 1px solid #000; vertical-align: middle; height: 40px;font-size: 14px;} td {border: 1px solid #000; line-height:40px;}}'
})
}css样式说明：
// 设置A4，横向打印，边距是10mm
@page { size: A4 landscape; margin: 10mm 10mm 10mm 10mm;}
// 缩放比例87%，内容边距5mm
body{zoom: 87%; margin:0mm 5mm 0mm 5mm;}
//设置表格内容剧中，边框及颜色，表格高度
tbody {text-align:center;border: 1px solid #000000;} th {border: 1px solid #000; vertical-align: middle; height: 40px;font-size: 14px;} td {border: 1px solid #000; line-height:40px;}}总结
到此这篇关于elementUI+vue+printJs实现页面表格数据打印功能的文章就介绍到这了,更多相关printJs页面表格数据打印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！