当前位置： 代码网 > it编程>前端脚本>Vue.js > vue页面使用js实现前端打印功能

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

2024年05月26日 • Vue.js •我要评论
vue页面使用js实现前端打印功能添加打印输出按钮printcontent实现打印功能，针对于打印表单时获取不到页面数据可以使用js原生。遍历循环你所要获取的元素。针对于打印出来的页面会出现页眉和页脚

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

在这里插入图片描述

添加打印输出按钮

在这里插入图片描述

printcontent实现打印功能，针对于打印表单时获取不到页面数据可以使用js原生。遍历循环你所要获取的元素。

在这里插入图片描述

针对于打印出来的页面会出现页眉和页脚重新在写一个style

在这里插入图片描述

这样数据就可以渲染上去了，然后页眉页脚也没有了。这里margin的值可以自己随便更改。如果你觉得再添加一个style麻烦的话，可以在打印页面的时候取消掉页眉和页脚也是一样的。

在这里插入图片描述

最后想要是页面上的打印按钮隐藏，使用原生js方法让它的样式隐藏就可以了。

在这里插入图片描述

在这里插入图片描述

这样就完成啦！

到此这篇关于vue页面使用js实现前端打印功能的文章就介绍到这了,更多相关vue js前端打印内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

赞 (0)

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com