本篇文章給大家談?wù)剉ue常見(jiàn)的打印插件，以及vue調(diào)用打印機(jī)的兩種方式對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、vue實(shí)現(xiàn)打印功能
• 2、vue 打印 vue-print-nb
• 3、v-print打印插件使用
• 4、Vue 報(bào)表插件
• 5、vue.js - 打印插件

vue實(shí)現(xiàn)打印功能

打印功能可以自己使用原生js（window.print()）實(shí)現(xiàn)，其次就是使用插件，介紹一個(gè)打印插件

vue-print-nb ：這個(gè)插件使用起來(lái)還是很便捷的，用法如下

1、安裝

2、配置

vue2.0

vue3.0

3、具體使用方法：（1）直接綁定id方法 （2）綁定對(duì)象方法

4、v-print API

vue 打印 vue-print-nb

常見(jiàn)的打印有JavaScript打印、jQuery、vue打印，這里主要講述vue使用vue-print-nb進(jìn)行打印

只需要在組件的打印區(qū)域里，給需要隱藏的內(nèi)容的標(biāo)簽上添加

在全局樣式中，新增style media="print"/style標(biāo)簽，里面是打印時(shí)才生效的樣式

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盒子

方式二：轉(zhuǎn)圖片打印

Vue 報(bào)表插件

環(huán)境 Vue2.x

之前使用的報(bào)表開發(fā)插件?????? vue-easy-print @0.0.8 ????

能打印pdf報(bào)表,但是存在 不能打印多頁(yè) 的問(wèn)題,使用人數(shù)較少,文檔較少,版本較低,放棄.

改用新的插件? ? ? print-js

能在原來(lái)的基礎(chǔ)上解決打印多頁(yè)pdf的問(wèn)題

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:''})"

? 生成報(bào)表

/el-button

例如:

????style:'{div:{color:#008855}}'

? ? 字體縮小? .reportTable{font-size:0.8em !important }

#能分頁(yè)靠的是這個(gè)css

```

.reportBox {

? text-align: center;

? width: 100%;

? margin: auto;

? page-break-after: always;

? margin-top: 20px;

? font-family: "微軟雅黑";

}

```

vue.js - 打印插件

如何vue項(xiàng)目中實(shí)現(xiàn) 打印 功能，GitHub上發(fā)現(xiàn)一個(gè)插件，既優(yōu)雅又方便。

關(guān)于vue常見(jiàn)的打印插件和vue調(diào)用打印機(jī)的兩種方式的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。