vue 实现前端点击打印png

1.前提:安装

        (1)安装npm插件:npm install --save html2canvas

        (2)在需要用的页面内引入 import html2canvas form "html2canvas"

2.点击事件触发

        

3.给所打印的地方绑定ref

         

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue前端实现静默打印的方法可以通过以下步骤实现: 1. 首先,引入一个隐藏的iframe元素,并将其设置为不可见。这可以通过在Vue组件的`template`中添加一个`<iframe>`元素,并设置属性`style="display: none;"`来实现。 2. 在需要进行静默打印的逻辑代码中,通过获取该iframe元素的引用,并设置其src属性为需要打印的内容。这可以通过在Vue组件的`methods`中添加一个方法,然后在需要打印的地方调用该方法来实现。 3. 通过在iframe元素的`load`事件中执行打印操作,实现静默打印。在Vue组件的`mounted`生命周期钩子中,监听iframe元素的`load`事件,并在事件触发时执行打印操作。 综上所述,以下是一个示例的Vue组件代码,实现了静默打印的功能: ```vue <template> <div> <iframe ref="printIframe" style="display: none;"></iframe> <button @click="handlePrint">打印</button> </div> </template> <script> export default { methods: { handlePrint() { const printContent = '<h1>要打印的内容</h1>'; // 替换成需要打印的内容 const iframe = this.$refs.printIframe; iframe.srcdoc = printContent; } }, mounted() { const iframe = this.$refs.printIframe; iframe.onload = () => { iframe.contentWindow.print(); }; } }; </script> ``` 在上面的示例中,`handlePrint`方法用于设置iframe元素的srcdoc属性为需要打印的内容。`mounted`生命周期钩子监听iframe元素的load事件,事件触发后执行iframe.contentWindow.print()操作进行静默打印。通过点击"打印"按钮,即可实现静默打印功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

跃渊笺亓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值