vue 实现前端点击打印png

最新推荐文章于 2024-05-14 14:02:50 发布
最新推荐文章于 2024-05-14 14:02:50 发布
阅读量215 收藏
点赞数 1
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58405110/article/details/128716562
版权

1.前提：安装

        （1）安装npm插件：npm install --save html2canvas

        （2）在需要用的页面内引入 import html2canvas form "html2canvas"

2.点击事件触发

        

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

         

 

 

跃渊笺亓
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue打印自定义部分为图片
dnvtkhbn的博客
08-24 589
vue使用vue-print-nb打印部分页面
Vue中如何进行文件预览与打印？
程序猿徐师兄的博客
06-13 3660
通过本文的介绍，我们可以看到，使用Vue实现文件预览和打印功能并不困难。我们可以使用一些第三方库来帮助我们完成这些功能，同时也可以根据具体需求进行一些定制和优化。希望本文能对你有所帮助！
2024年最全【vue】实现打印功能_vue 打印，2024年最新精选前端面试真题集锦
最新发布
2401_84616292的博客
05-14 484
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】data() {return {id: 'nbprint', // 打印元素的id 不需要携带#号preview: true, // 开启打印预览previewTitle: '打印预览', // 打印预览标题。
vue页面打印成图片文件
weixin_45907435的博客
03-13 532
在后台管理项目中，想要把页面打印成图片文件，可以使用print-js和。
vue实现打印功能的两种方法
didumin1941的博客
03-28 3046
第一种方法：通过npm 安装插件 1，安装npm install vue-print-nb --save 2，引入 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' 　　Vue.use(Print); //注册 3，现在就可以使用了 <div id="printTes...
vue页面转pdf
05-06
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。它以其声明式编程、组件化以及易用性而受到开发者喜爱。在Vue应用中，有时我们需要将页面内容导出为PDF格式，以便用户可以离线查看或打印。这个压缩包...
前端学习思维导图（全）
03-25
在IT领域，特别是Web开发，前端技术是至关重要的部分，它涵盖了从网页设计到交互实现的各个环节。"前端学习思维导图（全）"这个压缩包文件提供了全面的学习资源，帮助初学者或经验丰富的开发者系统地理解和掌握前端...
Vue将页面导出为图片或者PDF
10-16
Vue.js 是一款流行的前端框架，用于构建用户界面。在某些场景下，我们可能需要将Vue应用中的页面导出为图片或PDF格式，以便于保存、分享或打印。本篇文章将详细讲解如何在Vue项目中实现这两种功能。 首先，我们要...
基于SpringBoot+Vue搭建的多功能体育场地智能管理系统源码+数据库+项目说明.zip
01-08
【资源说明】 1、基于SpringBoot+Vue搭建的多功能体育场地智能管理系统源码+数据库+项目说明.zip 2、该资源包括项目的全部源码，下载...* 因为前端是ajax访问的，所以日期不对的话下面的场馆表格是不会加载的，gms.sq
VUE使用vue-print-nb实现打印功能，解决图片问题，样式问题
wazxm123的博客
04-28 1万+
vue做了一个打印功能，也遇到过一些问题，记录一下,有些问题欢迎大家批评指正。 从网上找了一些打印方式最终决定用这种方式： 安装 npm install vue-print-nb --save 然后在main.js中引入 import Print from 'vue-print-nb' Vue.use(Print); 在vue文件中的使用 <div id="printMe'">打印的内容</div> <el-button v-print="'#printMe'">打印&l
Vue实现打印功能最简单的方法
皮皮的博客
07-09 5715
摘要： 今天做了一个ERP系统打印订单的功能，下面是效果图： 查了很多资料，一开始我直接用print.js这个插件，虽然能实现打印功能，但是当你需要打印的表格数据太多了，就无法实现分页打印，为了不浪费大家时间，所以在这里，我建议大家直接使用vue-print-nb这个插件，可以随心所欲的实现打印功能。在这里我就不多说了，用了就知道！下面说下安装和使用方法： 1、安装vue-print-nb npm install vue-print-nb --save 2、在main.js文件中引入 import
前端图片打印
gfh603215099的博客
06-13 4023
javascript:;&lt;div class="usePrint"&gt;        &lt;img runat="server" src="../../images/qxxx/picdefault.jpg"&gt;&lt;/div&gt;&lt;a href="javascript:;" class="print" onclick=&quot
VUE中使用CLodop获取打印机列表并打印表格、图片等
zxo_apple的博客
10-20 5744
打印如下表格（含图片） 1.在vue项目中，创建一个js文件，引入以下代码 var CreatedOKLodop7766=null //====判断是否需要安装CLodop云打印服务器:==== export function needCLodop(){ try{ var ua=navigator.userAgent if (ua.match(/Windows\sPhone/i) !=null) return true if (ua.match(/iPhone|iPod/i)
vue中实现打印功能的方法与注意事项
weixin_44463883的博客
06-06 9274
vue中实现打印功能的方法与注意事项
vue 使用print.js实现前端打印功能
热门推荐
cccdf_jjj的博客
08-14 5万+
最近新接了一个需求，想要在前端实现打印功能，最开始试了window.print()这个方法，结果发现我想打印的图片它只能打印图片中的一部分，打印的不完整，如下图 调整了缩放比例之后发现还是不可以，后来又尝试了vue里面的一个插件vue-print-nb，但是当所有的东西都配置好之后，点击打印的时候竟然报错，大概意思是说我的css样式获取不到 然后我试了最后一种方法，亲测好使print.js...
关于Leaflet打印地图的三种方法
qq_43334519的博客
01-06 1249
leaflet地图打印的三种插件简介
vue前端实现静默打印
08-30
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、付费专栏及课程。

余额充值