vue页面使用js实现前端打印功能

最新推荐文章于 2024-07-25 14:09:05 发布
置顶 最新推荐文章于 2024-07-25 14:09:05 发布
阅读量1.2w 收藏 14
点赞数 1
文章标签： 前端打印 js打印 vue页面使用js打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jasmine0178/article/details/88551177
版权

vue页面使用js实现前端打印功能

在这里插入图片描述
添加打印输出按钮
在这里插入图片描述
printContent实现打印功能，针对于打印表单时获取不到页面数据可以使用js原生。遍历循环你所要获取的元素。
在这里插入图片描述
针对于打印出来的页面会出现页眉和页脚重新在写一个style
在这里插入图片描述
这样数据就可以渲染上去了，然后页眉页脚也没有了。这里margin的值可以自己随便更改。如果你觉得再添加一个style麻烦的话，可以在打印页面的时候取消掉页眉和页脚也是一样的。
在这里插入图片描述
最后想要是页面上的打印按钮隐藏，使用原生js方法让它的样式隐藏就可以了。
在这里插入图片描述
在这里插入图片描述

这样就完成啦！

jasmine0178
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue前端实现打印功能
FangFang's Blog
06-07 5115
方案一：vue页面设置单独的div区域专门做打印：调用打印方法： 对打印页面调整样式 方案二：与方案一差不多只是不单独设置独立div用于打印，直接对展示页面进行打印，再通过样式去调整打印页面的显示，而且不用安装html2canvas.........
2024年Web前端最全【vue】实现打印功能_vue 打印(1)，retrofit教程
2401_84437170的博客
05-04 853
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】 NB打印
vue+element实现打印页面功能
12-29
项目中遇到了要打印页面的功能,我感觉我这个方法不太好,欢迎各位来改善指导 　　使用print插件  https://github.com/xyl66/vuePlugs_printjs 1.在min.js中引入 2.import Print from ‘@/plugs/print’ 3.Vue.use(Print) // 注册 　　<要打印内容/> 不要打印我 this.$print(this.$refs.
非常 nb 的 Vue 组件 (含Vue3版本)（打印）
最新发布
qq_66953312的博客
07-25 1378
关于 vue-print-nb 组件的详细介绍！
vue实现打印浏览器页面功能(两种方法)
IT13333的博客
02-13 4642
插件地址：https://github.com/xyl66/vuePlugs_printjs1.在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下2.在main.js中引入print.js 里的代码//print.js 里的代码 // 打印类属性、方法定义 /* eslint-disable */ const Print = function(dom , options) {if(!
vue html页面打印功能vue-print
weixin_33910460的博客
04-10 1888
vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 使用方式 安装 npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' Vue.use(Print); 页面中使用,给需要打印的容器...
vue中使用vue-print.js实现多页打印
11-21
本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装 下载 print.js https://github.com/zxc19890923/print/blob/master/print.js 在src目录下面创建plugins/pri
vue使用lodop.js实现前端标签打印
weixin_43998944的博客
07-12 3151
vue 使用lodop 实现标签打印
vue + iframe 实现页面打印功能
weixin_44446223的博客
09-19 905
vue 实现页面打印功能
vue实现页面打印的四种方法
Gik99的博客
06-13 1240
vue实现页面打印的四种方法
Vue实现浏览器打印功能的代码
11-20
Vue实现浏览器打印功能 实际项目中使用vue实现调用本地打印机打印功能 import vueEasyPrint from “vue-easy-print”; 1.导入 “vue-easy-print” 2.编写打印模板 <!-- 分页 --> 用户昵称 归属
页面实现预览和打印(页面整体打印和局部打印)
12-20
如何在html和jsp页面中实现预览和打印功能，我查找了一些资料并做了整理改进，压缩包中有两种形式的实现，可以实现页面整体预览和打印，也可以实现局部表格和文档的预览和打印功能。
vue实现打印功能的两种方法
10-18
主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
vue使用原生js打印界面及echarts图表
qq_36306693的博客
03-20 599
1.将要打印的echarts图表生成图片 this.rceivebase1 = this.chartBarPrint.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }) 2.获取或创建iframe元素，获取页面样式和页面代码，并将样式和代码及echarts图片写入iframe中（其中ele...
vue原生js打印插件
热门推荐
a8725585的博客
06-12 1万+
需求 在vue单页面应用中打印目标区域 解决方案 使用原生window.print var printhtml = window.getElementById(dom).innerHtml // 获取打印区域 var oldhtml = document.innerHtml // 保存原始内容 document.innerHtml = printhtml // 赋值打印 windo...
vue项目 前端实现打印功能
小肉包的博客
02-07 1508
vue项目 前端实现打印功能 vue已经帮我们封装好了使用非常方便的安装包，安装了依赖包之后可以很简单地就实现打印功能。 使用步骤如下： 1.下载安装包 npm install vue-print-nb --save 2.在main.js文件中引入安装包并注册组件 import Print from 'vue-print-nb' Vue.use(Print); 3.使用Print 3.1 给要打印的dom标签(要打印的内容部分)绑定一个id 3.2 给button按钮绑定v-print指令，值是上面绑定
Web前端--HTML+CSS+JS新型冠状病毒射击小游戏_js射击小游戏源码
2401_84434331的博客
04-27 962
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
vue和springboot实现打印功能
04-23
1. 在前端使用Vue框架，通过HTML和Vue组件实现打印页面的布局和样式。 2. 使用JavaScript的window.print()方法，将打印页面打印到打印机上。 3. 在后端使用Spring Boot框架，实现打印功能的数据处理和打印服务的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值