Vue使用Print.js打印div方式(选中区域的html)
更新时间：2024年03月11日 10:11:43 作者：蓝胖子的多啦A梦
这篇文章主要介绍了Vue使用Print.js打印div方式(选中区域的html),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、下载 Print.js 插件
npm install print-js --save
二、导入 Print.js 插件
import print from 'print-js'
三、在页面上使用
<div id="printJS-form">
需要打印的区域
</div>
<button type="button" @click="printJS('printJS-form', 'html')">
打印按钮
</button>
methods: {
//打印
printDetail(){
printJS({
printable:'printJS-form', //打印区域
type:'html', //打印类型html，还可以是json，image等，详细写法见官网
targetStyles: ['*'], //css样式，写成*代表打印样式完全继承你页面的样式
maxWidth:'800px' //打印界面最大宽度，适当调整可以解决打印页面过宽，显示不完整的问题
})
},
}
展示效果
tips
printHtml打印默认显示当前日期和url怎么去掉
普通表单的打印平台提供的printHtml,用的是浏览器的打印
在打印的时候页面上可能会在头部显示当前日期，在底部显示url，这个浏览器打印的页眉页脚控制的
可以设置不要页眉页脚或者设置页眉页脚为空
iE的页眉页脚设置在菜单栏——文件——页面设置中
chrome的在打印的时候提供的有打印设置
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue混入与插件的使用，mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等2022-09-09
这篇文章主要介绍了Vue3计算属性是如何实现的，对于任何包含响应式数据的复杂逻辑，我们都应该使用计算属性，更多相关内容需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了vue3.0 自适应不同分辨率电脑的操作,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要介绍了VUE项目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正则和element ui写法，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue-cli3.0 特性解读,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家详细介绍了Vue中使用vux配置的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了vue获取验证码倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
vue elementui 实现图片上传后拖拽排序功能示例代码
这篇文章主要介绍了vue elementui 实现图片上传后拖拽排序功能,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这里提供一个Vue单点登录的demo给大家参考，对Vue实现单点登录控件的完整代码感兴趣的朋友跟随小编一起看看吧2021-11-11
今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论