vue打印html,Vue 前端开发——打印功能实现

本文介绍了在Vue项目中如何实现HTML打印功能,包括封装打印脚本`print.js`,注册插件并在Vue中使用。文章详细讲解了如何处理样式、表单元素,并提到了两个相关插件`Print.js`和`vue-print-nb`的安装和使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

db1ac85b617c192260812bf533aaa3f5.png

业务场景常见于一些订单记录发票等的一些pdf 打印,保留了样式,可以打印彩色内容也可以打印黑白内容,如果业务复杂的比如添加水印的目前不支持,一般会特定处理,通过canvas 的方式处理。

封装打印脚本

print.js// 打印类属性、方法定义/* eslint-disable */const Print = function(dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend( { noPrint: ".no-print" }, options ); if (dom instanceof String) { this.dom = document.querySelector(dom); } else { this.isDOM(dom); this.dom = this.isDOM(dom) ? dom : dom.$el; } this.init();};Print.prototype = { init: function() { var content = this.getStyle() + this.getHtml(); this.writeIframe(content); }, extend: function(obj, obj2) { for (var k in obj2) { obj[k] = obj2[k]; } return obj; }, getStyle: function() { var str = "",

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值