东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
27
2024/12

VUE如何使用vue-print實(shí)現(xiàn)快速打印功能

發(fā)布時(shí)間:2024-12-27 19:30:13
發(fā)布者:dzw
瀏覽量:
0

    記得我們之前講過(guò),如何把一個(gè)表格使用插件導(dǎo)出為excel文件,今天這個(gè)方法和之前的方法相同,都是使用插件來(lái)快速實(shí)現(xiàn)簡(jiǎn)單打印功能。

我們?nèi)绻麤](méi)有太過(guò)細(xì)致的打印要求,可以使用vue-print,使用方法如下圖所示。

    首先,使用以下代碼導(dǎo)入依賴:

  npm install vue-print-nb --save

    然后我們?cè)趍ain.js中引入vue-print

  import Print from 'vue-print-nb' 
  Vue.use(Print)

VUE如何試用vue-print實(shí)現(xiàn)快速打印功能

    然后在我們的頁(yè)面就能正常使用了,使用方法也特別簡(jiǎn)單。

    就像使用v-for一樣,直接在標(biāo)簽里加v-print=#id名。這個(gè)id名就是你要打印的區(qū)域。

VUE如何試用vue-print實(shí)現(xiàn)快速打印功能

    v-print會(huì)盡量的保證所有的內(nèi)容展示在里邊,當(dāng)然,如果你強(qiáng)制設(shè)定了表格或者圖片的寬度,那么還是超出,打印不了超出的內(nèi)容。

VUE如何試用vue-print實(shí)現(xiàn)快速打印功能

    print選擇了區(qū)域并喚起了winonds.print()方法。

VUE如何試用vue-print實(shí)現(xiàn)快速打印功能

當(dāng)然,print還支持更多的設(shè)置,本文不過(guò)多贅述,使用的部分api由下圖所示。

VUE如何試用vue-print實(shí)現(xiàn)快速打印功能

關(guān)鍵詞:
返回列表