脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue使用Print.js打印div

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的在打印的时候提供的有打印设置

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论