vue-print-nb實(shí)現(xiàn)頁(yè)面打印功能實(shí)例(含分頁(yè)打印)
Web 實(shí)現(xiàn)頁(yè)面打印
安裝
官網(wǎng)地址:https://github.com/Power-kxLee/vue3-print-nb
// 安裝 打印組件 npm install vue-print-nb --save
引用
vue2引用
import Print from 'vue-print-nb' // 全局引用 Vue.use(Print); // 或者 // 單組件引用 import print from 'vue-print-nb' // 在自定義指令中注冊(cè) directives: { print }
vue3引用
// 全局引用 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' // 在自定義指令中注冊(cè) directives: { print }
API
屬性 | 類(lèi)型 | 默認(rèn)值 | 必要 | 可選值 | 描述 |
---|---|---|---|---|---|
id | String | - | 是 | - | 范圍打印 ID(如果設(shè)置url則可以不設(shè)置id) |
url | String | - | 否 | - | 打印指定的 URL。(不允許同時(shí)設(shè)置ID |
popTitle | String | - | 否 | - | 默認(rèn)使用瀏覽器標(biāo)簽名,為空時(shí)為undefined |
standard | String | HTML5 | 否 | html5,loose,strict | 打印的文檔類(lèi)型 |
extraHead | String | - | 否 | - | 在節(jié)點(diǎn)中添加 DOM 節(jié)點(diǎn), 并用,(Print local range only)分隔多個(gè)節(jié)點(diǎn) |
extraCss | String | - | 否 | - | 新的 CSS 樣式表, 并使用,(僅打印本地范圍)分隔多個(gè)節(jié)點(diǎn) |
openCallback | Function | - | 否 | - | 調(diào)用打印工具成功回調(diào)函數(shù) |
closeCallback | Function | - | 否 | - | 關(guān)閉打印工具成功回調(diào)函數(shù) |
beforeOpenCallback | Function | - | 否 | - | 調(diào)用打印工具前的回調(diào)函數(shù) |
preview | Boolean | false | 否 | true,false | 預(yù)覽工具 |
previewTitle | String | - | 否 | - | ‘打印預(yù)覽’ |
previewPrintBtnLabel | String | 打印 | 否 | - | 打印按鈕名稱(chēng) |
previewBeforeOpenCallback | Function | - | 否 | - | 預(yù)覽打開(kāi)前回調(diào)函數(shù) |
previewOpenCallback | Function | - | 否 | - | 預(yù)覽打開(kāi)回調(diào)函數(shù) |
clickMounted | Function | - | 否 | - | 點(diǎn)擊打印按鈕回調(diào)函數(shù) |
示例代碼
全頁(yè)面打印
<button v-print>打印整個(gè)頁(yè)面</button>
局部打印(Tip:被打印的區(qū)域需要被渲染出來(lái)并且不能被隱藏才可以打?。?/p>
<template> <div> <button v-print="printOption">NB打印</button> <div id="nbprint"> <table> <tr> <th>序號(hào)</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>手機(jī)</th> <th>郵箱</th> <th>地址</th> <th>工齡</th> <th>崗位</th> <th>薪資</th> </tr> <tr v-for="(item, index) in list" key="index"> <td>{{ index + 1}}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.sex }}</td> <td>{{ item.phone }}</td> <td>{{ item.mail }}</td> <td>{{ item.address }}</td> <td>{{ item.workAge }}</td> <td>{{ item.jobs }}</td> <td>{{ item.salary }}</td> </tr> </table> </div> </div> </template> <script> export default { name: "nb-print", data() { return { printOption: { id: 'nbprint', // 打印元素的id 不需要攜帶#號(hào) popTitle: '員工信息' // 頁(yè)眉標(biāo)題 默認(rèn)瀏覽器標(biāo)題 空字符串時(shí)顯示undefined 使用html語(yǔ)言 }, list: [{ name: "阿噠", age: 26, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "藍(lán)星星國(guó)馬爾哈哈海島", workAge: 2, jobs: "研發(fā)", salary: "1.8k" }, { name: "阿榮", age: 24, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "藍(lán)星星國(guó)馬爾哈哈海島", workAge: 1, jobs: "研發(fā)", salary: "1.8k" }, { name: "阿豪", age: 26, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "藍(lán)星星國(guó)馬爾哈哈海島", workAge: 5, jobs: "產(chǎn)品", salary: "1.8k" }, { name: "阿晨", age: 29, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "藍(lán)星星國(guó)馬爾哈哈海島", workAge: 9, jobs: "設(shè)計(jì)", salary: "1.8k" }, { name: "阿震", age: 30, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "藍(lán)星星國(guó)馬爾哈哈海島", workAge: 7, jobs: "銷(xiāo)售", salary: "1.8k" }, { name: "阿鋒", age: 21, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "藍(lán)星星國(guó)馬爾哈哈海島", workAge: 0.1, jobs: "售后", salary: "1.8k" } ] } } } </script>
打印預(yù)覽
<script> export default { name: "nb-print", data() { return { printOption: { id: 'nbprint', // 打印元素的id 不需要攜帶#號(hào) preview: true, // 開(kāi)啟打印預(yù)覽 previewTitle: '打印預(yù)覽', // 打印預(yù)覽標(biāo)題 popTitle: '員工信息', // 頁(yè)眉標(biāo)題 默認(rèn)瀏覽器標(biāo)題 空字符串時(shí)顯示undefined 使用html語(yǔ)言 // 頭部文字 默認(rèn)空 在節(jié)點(diǎn)中添加 DOM 節(jié)點(diǎn), 并用,(Print local range only)分隔多個(gè)節(jié)點(diǎn) extraHead:'https://***/***.css, https://***/***.css', // 新的 CSS 樣式表, 并使用,(僅打印本地范圍)分隔多個(gè)節(jié)點(diǎn) extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>', previewBeforeOpenCallback: () => { console.log("觸發(fā)打印預(yù)覽打開(kāi)前回調(diào)"); }, previewOpenCallback: () => { console.log("觸發(fā)打開(kāi)打印預(yù)覽回調(diào)"); }, beforeOpenCallback: () => { console.log("觸發(fā)打印工具打開(kāi)前回調(diào)"); }, openCallback: () => { console.log("觸發(fā)打開(kāi)打印工具回調(diào)"); }, closeCallback: () => { console.log("觸發(fā)關(guān)閉打印工具回調(diào)"); }, clickMounted: () => { console.log("觸發(fā)點(diǎn)擊打印回調(diào)"); } } } } } </script>
分頁(yè)打印
<template> <div> <button v-print="'#nbprint'">NB打印</button> <div id="nbprint"> // 方法一 // 使用div包裹需要分頁(yè)的塊 使用 css屬性 page-break-after:always進(jìn)行分頁(yè) <div style="page-break-after:always">這是第二頁(yè)</div> <div style="page-break-after:always">這是第二頁(yè)</div> </div> </div> </template> <style> // 方法二 // 使用媒體查詢(xún) 在打印時(shí)設(shè)置 body 和 html 的高度為auto @media print { @page { size: auto; } body, html { height: auto !important; } } </style>
補(bǔ)充:vue-print-nb插件的一些優(yōu)化
1.去掉頁(yè)眉頁(yè)腳
<style> @page { size: auto; margin: 0mm; } </style>
2.打印內(nèi)容不自動(dòng)換行問(wèn)題
只需要給不自動(dòng)換行的標(biāo)簽加上 word-wrap:break-word; 即可。
<style> .procedure{ word-wrap:break-word; } </style>
總結(jié)
到此這篇關(guān)于vue-print-nb實(shí)現(xiàn)頁(yè)面打印功能的文章就介紹到這了,更多相關(guān)vue-print-nb頁(yè)面打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用Luckysheet插件實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出
本文主要介紹了vue使用Luckysheet插件實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03Vue組件渲染與更新實(shí)現(xiàn)過(guò)程淺析
這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-03-03mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同,只是mpvue有一個(gè)坑,就是不能直接在new Vue的時(shí)候傳入store。本文分步驟給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-03-03詳解vue+vueRouter+webpack的簡(jiǎn)單實(shí)例
這篇文章主要介紹了詳解vue+vueRouter+webpack的簡(jiǎn)單實(shí)例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06vue項(xiàng)目中引入noVNC遠(yuǎn)程桌面的方法
下面小編就為大家分享一篇vue項(xiàng)目中引入noVNC遠(yuǎn)程桌面的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue中頁(yè)面跳轉(zhuǎn)攔截器的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中頁(yè)面跳轉(zhuǎn)攔截器的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08