vue-print-nb解決vue打印問(wèn)題,并且隱藏頁(yè)眉頁(yè)腳方式
vue-print-nb解決vue打印問(wèn)題,并隱藏頁(yè)眉頁(yè)腳
1、通過(guò) npm 安裝 vue-print-nb
npm install vue-print-nb --save
2、掛載到 Vue 上
?import Print from 'vue-print-nb' Vue.use(Print)
3、配置打印對(duì)象
<div id="main"> 這里是要打印的東西 </div> <!-- 打印按鈕,通過(guò) v-print 調(diào)用打印事件 --> <button v-print="printObj">打印</button>
export default { name: "XssqAddActivity", data() { return { printObj: { id: "main", // 這里是要打印元素的ID popTitle: '', // 打印的標(biāo)題 extraCss: '', // 打印可引入外部的一個(gè) css 文件 extraHead: '' // 打印頭部文字 }, } } }
這是 vue-print-nb 的官網(wǎng)地址:
https://www.npmjs.com/package/vue-print-nb
4、打印時(shí)出現(xiàn)頁(yè)面頁(yè)腳的解決辦法,添加一下 css樣式
/*去除頁(yè)眉頁(yè)腳*/ @page{ size: auto; /* auto is the initial value */ margin: 3mm; /* this affects the margin in the printer settings */ } html{ background-color: #FFFFFF; margin: 0; /* this affects the margin on the html before sending to printer */ } body{ border: solid 1px blue ; margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */ } /*去除頁(yè)眉頁(yè)腳*/
注意事項(xiàng):
vue-print-nb 不能打印一些 css3 的樣式,比如說(shuō)一些 UI 組件庫(kù)的 radio 等。
如果需要打印請(qǐng)自己封裝 radio,(試過(guò)通過(guò) html2canvas + printJs 打印但是可控性太差,因?yàn)橹荒馨秧?yè)面可見(jiàn)內(nèi)容轉(zhuǎn)換成 canvas 打印,如果用戶屏幕太小,進(jìn)行轉(zhuǎn)換圖片會(huì)缺失)
vue實(shí)現(xiàn)打印功能(vue-print-nb)
安裝vue-print-nb
Vue2.0版本安裝方法:
npm install vue-print-nb --save
Vue3.0版本安裝方法:
npm install vue3-print-nb --save
引入Vue項(xiàng)目
Vue2.0引入方式:
// 1. 全局掛載 import Print from 'vue-print-nb' Vue.use(Print) // or // 2. 自定義指令 import print from 'vue-print-nb' directives: { ? print }
Vue3.0引入方式:
// 1. 全局掛載 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') // or? // 2. 自定義指令 import print from 'vue3-print-nb' directives: { ? ? print ?? }
在組件中使用
注意:一定要給需要打印的容器加一個(gè)id,點(diǎn)擊打印按鈕的時(shí)候調(diào)用傳入的id
<!--//通過(guò)按鈕來(lái)調(diào)用--> <el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button> <!--//需要打印的頁(yè)面--> <div id="printMe" ref="printContent"> ? ? ? ? <div class="hammer"> ? ? ? ? ? ? <h3>黃山市機(jī)動(dòng)車(chē)排放維修治理(M)站竣工出廠合格證</h3> ? ? ? ? </div> ? ? ? ? <!-- //內(nèi)容 --> ? ? ? ? <div class="trail"> ? ? ? ? ? ? <p>該車(chē)經(jīng)我站治理維護(hù),準(zhǔn)予出廠。</p> ? ? ? ? </div> </div>
data的return中
? name: "print", ? data() { ? ? return { ? ? ? pageList: [], ? ? ? status: false, ? ? ? printObj: { ? ? ? ? id: "myPrint", // 這里是要打印元素的ID ? ? ? ? popTitle: " ", // 打印的標(biāo)題 ? ? ? ? extraCss: "", // 打印可引入外部的一個(gè) css 文件 ? ? ? ? extraHead: "", // 打印頭部文字 ? ? ? }, ? ? }; ? },
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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題
這篇文章主要介紹了vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化,就會(huì)遇到多組件狀態(tài)共享的情況,今天我們介紹的是 vue.js 2.6 新增加的 Observable API ,通過(guò)使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況,感興趣的可以了解一下2021-06-06Vue?編程式路由導(dǎo)航的實(shí)現(xiàn)示例
本文主要介紹了Vue?編程式路由導(dǎo)航2022-04-04vite?+?electron-builder?打包配置詳解
這篇文章主要為大家介紹了electron基于vite?+?electron-builder?打包配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決
在前端開(kāi)發(fā)中,Electron是一種常用的工具,它允許開(kāi)發(fā)者使用Web技術(shù)構(gòu)建桌面應(yīng)用程序,本文主要介紹了vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06vuex頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題的四種解決方式
vuex是大家使用vue時(shí)大多數(shù)都會(huì)選擇的,但是當(dāng)頁(yè)面刷新之后vuex數(shù)據(jù)會(huì)丟失,下面這篇文章主要給大家介紹了關(guān)于vuex頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題的四種解決方式,需要的朋友可以參考下2022-02-02