这篇文章主要介绍了Vue实现浏览器打印功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vue实现浏览器打印功能
实际项目中使用vue实现调用本地打印机打印功能
import vueEasyPrint from "vue-easy-print";
1.导入 “vue-easy-print”
2.编写打印模板
用户昵称 归属部门 手机号码 邮箱 用户名称 用户性别 状态 岗位 角色 备注 {{tableData.nickName}} {{tableData.deptId}} {{tableData.phonenumber}} {{tableData.email}} {{tableData.userName}} {{tableData.sex}} {{tableData.status}} {{tableData.userName}} {{tableData.userName}}
3.在需要添加打印功能的界面引入打印模板
import printUser from "./printUser";
4.注册模板 printUser 和vueEasyPrint
components: { vueEasyPrint,printUser },
5.添加打印按钮。
el-button size="mini" type="text" icon="el-icon-edit" @click="printDemo(scope.row)" v-hasPermi="['system:user:edit']" >打印 **** **** ** **
6.将要打印的内容传值到模板
printDemo(row) { this.reset(); const userId = row.userId || this.ids; getUser(userId).then(response => { this.tabledata = response.data; //注:此处使用延时的原因是,防止点击打印都,打印内容还未渲染到模板,导致打印页面显示空白。 setTimeout(() =>{ this.$refs.easyPrint.print(); },100); }); },
7.打印模板接收值并赋值到打印模板(打印模板可根据业务需求自行调整)
export default { name: "printUser", // 制作打印模版组件时,props区域尽量保留。 props: { // 接受的打印数据,此处父子组件传值,在子组件(模板)定义一个对象(若为集合或者其他类型,自行定义)tableData,用于接收父组件传递的值, tableData: {}, // 每页多少行 onePageRow: { type: Number, default: 5 }, // 是否插入空白行 blankLines: { type: Boolean, default: true }, getChineseNumber: Function // 求数字的中文写法,从easyPrint组件传入 }, computed: { pages() { console.log(this.tableData); // 求当前数据能打印的页数 /* var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow); // 向上取整数*/ // return pages_ <= 0 ? 1 : pages_; return 1; }, chineseTotal() { // 计算中文合计,如果忘记传入 return this.getChineseNumber != null ? this.getChineseNumber(this.tableData.total_amount) : "您还没有传入getChineseNumber"; } }, methods: { test() { console.log("21111111111111"); console.log("test"); } } };
实现功能的界面如下:
总结
到此这篇关于Vue实现浏览器打印功能的文章就介绍到这了,更多相关vue 浏览器打印内容请搜索html中文网以前的文章或继续浏览下面的相关文章希望大家以后多多支持html中文网!
以上就是Vue实现浏览器打印功能的代码的详细内容,更多请关注0133技术站其它相关文章!