安裝vue3-print-nb
npm install vue3-print-nb --save引用vue3-print-nb
全局引入
// 全局引用
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')局部引入
// 單組件引用
import print from 'vue3-print-nb'
// 在自定義指令中注冊
directives: {
print
}API
官網(wǎng)地址：https://github.com/Power-kxLee/vue3-print-nb
官網(wǎng)有詳細介紹
示例代碼
全頁面打印
<button v-print>打印整個頁面</button>局部打印
被打印的區(qū)域需要被渲染出來，隱藏的元素不能打印文章來源：http://www.zghlxwxcb.cn/news/detail-698777.html
<div id="a">
? ? <p>打印我吧</p>
? ? <p>打印我吧</p>
? ? <p>打印我吧</p>
</div>
//寫法一
<button v-print="#a">局部打印</button>
//寫法二(可以接受對象)
<button v-print="{id:a}">局部打印</button>分頁打印文章來源地址http://www.zghlxwxcb.cn/news/detail-698777.html
<template>
<div>
<button v-print="'#a'">打印</button>
<div id="a">
// 方法一
// 使用div包裹需要分頁的塊 使用 css屬性 page-break-after:always進行分頁
<div style="page-break-after:always">第一頁</div>
<div style="page-break-after:always">第二頁</div>
</div>
</div>
</template>
<style>
// 方法二
// 使用媒體查詢 在打印時設(shè)置 body 和 html 的高度為auto
@media print {
@page {
size: auto;
}
body, html { //如果vue最外層id，默認是#app。如果設(shè)置了height:100%;，那么#app也加
height: auto !important;
}
}
</style>到了這里，關(guān)于vue3-print-nb 實現(xiàn)頁面打?。ê猪摯蛴。┑奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
