vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式
更新時間：2023年05月20日 15:02:03 作者：Insist_bin
這篇文章主要介紹了vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-print-nb解決vue打印問題,并隱藏頁眉頁腳
1、通過 npm 安裝 vue-print-nb
npm install vue-print-nb --save
2、掛載到 Vue 上
?import Print from 'vue-print-nb' Vue.use(Print)
3、配置打印對象
<div id="main"> 這里是要打印的東西 </div> <!-- 打印按鈕，通過 v-print 調(diào)用打印事件 --> <button v-print="printObj">打印</button>
export default {
name: "XssqAddActivity",
data() {
return {
printObj: {
id: "main", // 這里是要打印元素的ID
popTitle: '', // 打印的標(biāo)題
extraCss: '', // 打印可引入外部的一個 css 文件
extraHead: '' // 打印頭部文字
},
}
}
}這是 vue-print-nb 的官網(wǎng)地址：
https://www.npmjs.com/package/vue-print-nb
4、打印時出現(xiàn)頁面頁腳的解決辦法，添加一下 css樣式
/*去除頁眉頁腳*/
@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 */
}
/*去除頁眉頁腳*/注意事項：
vue-print-nb 不能打印一些 css3 的樣式，比如說一些 UI 組件庫的 radio 等。
如果需要打印請自己封裝 radio，（試過通過 html2canvas + printJs 打印但是可控性太差，因為只能把頁面可見內(nèi)容轉(zhuǎn)換成 canvas 打印，如果用戶屏幕太小，進(jìn)行轉(zhuǎn)換圖片會缺失）
vue實現(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項目
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 ??
}在組件中使用
注意：一定要給需要打印的容器加一個id,點擊打印按鈕的時候調(diào)用傳入的id
<!--//通過按鈕來調(diào)用--> <el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button> <!--//需要打印的頁面--> <div id="printMe" ref="printContent"> ? ? ? ? <div class="hammer"> ? ? ? ? ? ? <h3>黃山市機(jī)動車排放維修治理（M）站竣工出廠合格證</h3> ? ? ? ? </div> ? ? ? ? <!-- //內(nèi)容 --> ? ? ? ? <div class="trail"> ? ? ? ? ? ? <p>該車經(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: "", // 打印可引入外部的一個 css 文件
? ? ? ? extraHead: "", // 打印頭部文字
? ? ? },
? ? };
? },vue-print-nb插件的一些優(yōu)化
1.去掉頁眉頁腳
<style>
@page {
? ? size: auto;
? ? margin: 0mm;
? }
</style>2.打印內(nèi)容不自動換行問題
只需要給不自動換行的標(biāo)簽加上 word-wrap:break-word; 即可。
<style>
? .procedure{
? ? ? word-wrap:break-word;
? ?}
</style>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了element表單校驗提示定位到元素位置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
關(guān)于Vue父子組件傳參和回調(diào)函數(shù)的使用
這篇文章主要介紹了關(guān)于Vue父子組件傳參和回調(diào)函數(shù)的使用,我們將某段代碼封裝成一個組件，而這個組件又在另一個組件中引入，而引入該封裝的組件的文件叫做父組件，被引入的組件叫做子組件,需要的朋友可以參考下2023-05-05
vue click.stop阻止點擊事件繼續(xù)傳播的方法
今天小編就為大家分享一篇vue click.stop阻止點擊事件繼續(xù)傳播的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
路由這個概念最先是后端出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue前端路由以及vue-router兩種模式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
element-ui中el-row中設(shè)置:gutter間隔不生效問題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue?檢測變化的注意事項，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)分享一下vue3中動態(tài)組件遇到的問題,分別是動態(tài)組件綁定問題和動態(tài)組件的方法導(dǎo)出問題,有需要的小伙伴可以參考一下2024-12-12
@change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器，這篇文章主要介紹了vue的@change的用法,需要的朋友可以參考下2023-10-10
有時候我們使用el-table的選擇框時,如果涉及修改、刪除時,可能一次只允許用戶選擇一條,這樣的話如果使用頂部的全選復(fù)選框就不合適了,這篇文章主要給大家介紹了關(guān)于el-table表頭全選框隱藏或禁用設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-09-09