本文作者:qiaoqingyi

vue常见的打印插件(vue调用打印机的两种方式)

qiaoqingyi 2023-02-01 11054

本篇文章给大家谈谈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调用打印机的两种方式)

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调用打印机的两种方式的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

阅读
分享