本篇文章给大家谈谈vue常见的打印插件,以及vue调用打印机的两种方式对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
vue实现打印功能
打印功能可以自己使用原生js(window.print())实现,其次就是使用插件,介绍一个打印插件
vue-print-nb :这个插件使用起来还是很便捷的,用法如下
1、安装
2、配置
vue2.0
vue3.0
3、具体使用方法:(1)直接绑定id方法 (2)绑定对象方法
4、v-print API
vue 打印 vue-print-nb
常见的打印有JavaScript打印、jQuery、vue打印,这里主要讲述vue使用vue-print-nb进行打印
只需要在组件的打印区域里,给需要隐藏的内容的标签上添加
在全局样式中,新增style media="print"/style标签,里面是打印时才生效的样式
v-print打印插件使用
1.v-print-nb打印
A,安装
npm install vue-print-nb --save
B,main.js全局安装
import Print from 'vue-print-nb'
Vue.use(Print);
C,使用
方式一:直接打印
1.v-print=“printObj”
2.id为printMe的div盒子
方式二:转图片打印
Vue 报表插件
环境 Vue2.x
之前使用的报表开发插件 vue-easy-print @0.0.8
能打印pdf报表,但是存在 不能打印多页 的问题,使用人数较少,文档较少,版本较低,放弃.
改用新的插件 print-js
能在原来的基础上解决打印多页pdf的问题
npm install print-js --save
import printJS from 'print-js'
visa-template id="aaa" /visa-template
el-button type="primary" onclick="printJS( {printable:'aaa', type:'html',scanStyles:false,css:[''],style:''})"
生成报表
/el-button
例如:
style:'{div:{color:#008855}}'
字体缩小 .reportTable{font-size:0.8em !important }
#能分页靠的是这个css
```
.reportBox {
text-align: center;
width: 100%;
margin: auto;
page-break-after: always;
margin-top: 20px;
font-family: "微软雅黑";
}
```
vue.js - 打印插件
如何vue项目中实现 打印 功能,GitHub上发现一个插件,既优雅又方便。
关于vue常见的打印插件和vue调用打印机的两种方式的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。