vue3-print-nb的使用,點(diǎn)擊回調(diào)問(wèn)題
更新時(shí)間：2025年07月27日 14:56:31 作者：yg_小小程序員
解決TypeScript錯(cuò)誤需在env.d.ts配置代碼,頁(yè)面布局需用百分比匹配設(shè)計(jì)稿元素,父級(jí)組件應(yīng)正確應(yīng)用樣式
1. 安裝
npm install vue3-print-nb --save
2. main.js引入
import print from 'vue3-print-nb' // 打印插件 app.use(print)
main引入報(bào)ts錯(cuò)誤，可在env.d.ts里配置以下代碼
declare module "vue3-print-nb";
3. 頁(yè)面使用（代碼可直接復(fù)制）
- 注意：打印匹配紙張需要以百分比進(jìn)行匹配，即設(shè)計(jì)稿元素里子元素占父級(jí)的百分比
<template>
<el-dialog v-model="isShowPrint" destroy-on-close top="5vh" width="700" :before-close="cancelClick">
<div class="print">
<el-tabs tab-position="top" type="card" class="demo-tabs" v-model="activeTab">
<el-tab-pane label="男生模板" :name="1">
<div id="template1" v-loading="printLoading">
<div class="template_1">
<div class="profile-card">
<img class="" src="@/assets/images/posterMaleBg.png" alt="" srcset="">
<div class="card-content">
<img v-show="radio == 1" class="avatar" :src="logo" alt="logo" />
<img v-show="radio == 2" class="avatar" :src="male" alt="卡通頭像" />
<img v-show="radio == 3" class="avatar real-avatar" :src="userDetail.avatar"
alt="真人頭像" />
<div class="user-info">
<div class="user-info-row">
<div class="details row-left">
<div class="details-lab nick-name-lab">昵稱</div>
<div class="details-val nick-name"> {{ userDetail.nick_name }} </div>
</div>
<div class="details row-right">
<div class="details-lab">年齡</div>
<div class="details-val">
<span>{{ userDetail.age }}歲</span>
<span class="birthday">({{ userDetail.birthday }}年)</span>
</div>
</div>
</div>
<img class="line" src="@/assets/images/line.png" alt="">
<div class="user-info-row">
<div class="details row-left">
<div class="details-lab">學(xué)歷</div>
<div class="details-val">{{ userDetail.qualification }}</div>
</div>
<div class="details row-right">
<div class="details-lab"> 身高</div>
<div class="details-val">{{ userDetail.height }}</div>
</div>
</div>
<img class="line" src="@/assets/images/line.png" alt="">
<div class="user-info-row">
<div class="details row-left">
<div class="details-lab">職業(yè)</div>
<div class="details-val">{{ userDetail.occupation }}</div>
</div>
<div class="details row-right">
<div class="details-lab">年收入</div>
<div class="details-val">{{ userDetail.income }}</div>
</div>
</div>
<img class="line" src="@/assets/images/line.png" alt="">
<div class="user-info-row">
<div v-if="userDetail.city_name && userDetail.city_name.length > 7 ? true : false"
class="details row-left ">
<div class="details-lab city-lab">期望城市</div>
<div class="details-val city-val">{{ userDetail.city_name }}</div>
</div>
<div v-else class="details row-left">
<div class="details-lab">期望城市</div>
<div class="details-val">{{ userDetail.city_name }}</div>
</div>
<!-- 家鄉(xiāng) -->
<div v-if="userDetail.home_city_name && userDetail.home_city_name.length > 6 ? true : false"
class="details row-right">
<div class="details-lab hometown-lab">家鄉(xiāng)</div>
<div class="details-val hometown-val">{{ userDetail.home_city_name }}
</div>
</div>
<div v-else-if="userDetail.home_city_name" class="details row-right">
<div class="details-lab">家鄉(xiāng)</div>
<div class="details-val">{{ userDetail.home_city_name }}</div>
</div>
</div>
</div>
<div class="expectations">
<div>{{ userDetail.age_min }}-{{ userDetail.age_max }}歲</div>
<div>身高{{ userDetail.height_min }}-{{ userDetail.height_max }}cm</div>
<div> {{ userDetail.m_qualification }}</div>
</div>
<div class="code_container">
<img class="code_img" :src="qrCodeUrl" alt="二維碼" />
<div class="qr_code_content">微信掃一掃，立刻認(rèn)識(shí)ta</div>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="女生模板" :name="2">
<div id="template2" v-loading="printLoading">
<div class="template_1">
<div class="profile-card">
<img class="" src="@/assets/images/posterFemaleBg.png" alt="" srcset="">
<div class="card-content">
<img v-show="radio == 1" class="avatar" :src="logo" alt="logo" />
<img v-show="radio == 2" class="avatar" :src="female" alt="卡通頭像" />
<img v-show="radio == 3" class="avatar real-avatar" :src="userDetail.avatar"
alt="真人頭像" />
<div class="user-info">
<div class="user-info-row">
<div class="details row-left">
<div class="details-lab nick-name-lab">昵稱</div>
<div class="details-val nick-name"> {{ userDetail.nick_name }} </div>
</div>
<div class="details row-right">
<div class="details-lab">年齡</div>
<div class="details-val">
<span>{{ userDetail.age }}歲</span>
<span class="birthday">({{ userDetail.birthday }}年)</span>
</div>
</div>
</div>
<img class="line" src="@/assets/images/line.png" alt="">
<div class="user-info-row">
<div class="details row-left">
<div class="details-lab">學(xué)歷</div>
<div class="details-val">{{ userDetail.qualification }}</div>
</div>
<div class="details row-right">
<div class="details-lab"> 身高</div>
<div class="details-val">{{ userDetail.height }}</div>
</div>
</div>
<img class="line" src="@/assets/images/line.png" alt="">
<div class="user-info-row">
<div class="details row-left">
<div class="details-lab">職業(yè)</div>
<div class="details-val">{{ userDetail.occupation }}</div>
</div>
<div class="details row-right">
<div class="details-lab">年收入</div>
<div class="details-val">{{ userDetail.income }}</div>
</div>
</div>
<img class="line" src="@/assets/images/line.png" alt="">
<div class="user-info-row">
<div v-if="userDetail.city_name && userDetail.city_name.length > 7 ? true : false"
class="details row-left ">
<div class="details-lab city-lab">期望城市</div>
<div class="details-val city-val">{{ userDetail.city_name }}</div>
</div>
<div v-else class="details row-left">
<div class="details-lab">期望城市</div>
<div class="details-val">{{ userDetail.city_name }}</div>
</div>
<!-- 家鄉(xiāng) -->
<div v-if="userDetail.home_city_name && userDetail.home_city_name.length > 6 ? true : false"
class="details row-right">
<div class="details-lab hometown-lab">家鄉(xiāng)</div>
<div class="details-val hometown-val">{{ userDetail.home_city_name }}
</div>
</div>
<div v-else-if="userDetail.home_city_name" class="details row-right">
<div class="details-lab">家鄉(xiāng)</div>
<div class="details-val">{{ userDetail.home_city_name }}</div>
</div>
</div>
</div>
<div class="expectations">
<div>{{ userDetail.age_min }}-{{ userDetail.age_max }}歲</div>
<div>身高{{ userDetail.height_min }}-{{ userDetail.height_max }}cm</div>
<div> {{ userDetail.m_qualification }}</div>
</div>
<div class="code_container">
<img class="code_img" :src="qrCodeUrl" alt="二維碼" />
<div class="qr_code_content">微信掃一掃，立刻認(rèn)識(shí)ta</div>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="footer">
<div class="footer-left">
<el-radio-group v-model="radio" @change="radioChange">
<el-radio :value="1">logo</el-radio>
<el-radio :value="2">卡通頭像</el-radio>
<el-radio :value="3">真人頭像</el-radio>
</el-radio-group>
</div>
<div class="footer-right">
<el-button v-show="activeTab == 1" type="primary" size="small" v-print="printMaleObj">去打印</el-button>
<el-button v-show="activeTab == 2" type="primary" size="small" v-print="printFemaleObj">去打印</el-button>
<el-button size="small" @click="cancelClick">取消</el-button>
</div>
</div>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { userQrCode, getUserDetail } from '@/api/userManage/user';
import useLayOutSettingStore from '@/stores/modules/setting'
import { getChoose } from '@/utils/choose'
const props = defineProps({
id: {
type: String,
required: true
},
logo: {
type: String,
required: true
},
male: {
type: String,
required: true
},
female: {
type: String,
required: true
},
gender: {
type: Number,
required: true
}
});
let settingStore = useLayOutSettingStore();
const isShowPrint = ref(true);
const activeTab = ref(props.gender);
const emit = defineEmits(['cancel']);
const radio = ref(1)
const userDetail = reactive<any>({});
// 獲取用戶詳情
const Choose = new getChoose();
const getDetail = async () => {
settingStore.loading = true
const { data } = await getUserDetail({ user_id: props.id });
Object.assign(userDetail, data)
userDetail.height = Choose.getHeightList(userDetail.height)
userDetail.income = Choose.getAllStatus(userDetail.income, Choose.income)
userDetail.qualification = Choose.getAllStatus(userDetail.qualification, Choose.qualification)
if (!userDetail.m_qualification) {
userDetail.m_qualification = '學(xué)歷不限'
} else if (userDetail.m_qualification == '1') {
userDetail.m_qualification = Choose.getAllStatus(userDetail.m_qualification, Choose.qualification)
} else {
userDetail.m_qualification = Choose.getAllStatus(userDetail.m_qualification, Choose.qualification) + '及以上'
}
if (userDetail.nick_name.length > 8) {
userDetail.nick_name = userDetail.nick_name.slice(0, 8) + '...'
}
userDetail.birthday = userDetail.birthday.slice(2, 4)
};
// 獲取二維碼
const qrCodeUrl = ref<any>('');
const getCodeData = async () => {
const { data }: any = await userQrCode({ user_id: props.id });
qrCodeUrl.value = data.qr_code_to_user;
};
const cancelClick = () => {
emit('cancel');
};
onMounted(() => {
getDetail();
getCodeData();
});
const radioChange = (val: number) => {
radio.value = val;
};
// 打印
const printLoading = ref(false)
const printMaleObj = ref({
id:'template1',
popTitle: 'good print',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
beforeOpenCallback(vue:any) {
printLoading.value = true
},
openCallback(vue:any) {
printLoading.value = false
},
})
const printFemaleObj = ref({
id:'template2',
popTitle: 'good print',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
beforeOpenCallback(vue:any) {
printLoading.value = true
},
openCallback(vue:any) {
printLoading.value = false
},
})
</script>
<style scoped lang="scss">
@page {
size: auto;
margin: 0mm;
}
@mixin template_1 {
display: flex;
align-items: center;
justify-content: center;
.profile-card {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
.poster-bg {
width: 100%;
height: 100%;
object-fit: contain;
}
.card-content {
width: 100%;
height: 100%;
.avatar {
position: absolute;
top: 19%;
left: 15%;
width: 25%;
height: 17%;
border-radius: 8%;
}
.real-avatar {
object-fit: cover;
}
.user-info {
position: absolute;
top: 35%;
left: 12%;
width: 75.6%;
height: 26.6%;
padding: 0 5%;
display: flex;
flex-direction: column;
.user-info-row {
width: 100%;
display: flex;
justify-content: space-between;
margin: 4% 0;
font-family: PingFangSC, PingFang SC;
.details {
display: flex;
line-height: 100%;
.details-lab {
font-size: 14px;
color: #666;
}
.details-val {
flex: 1;
font-size: 14px;
color: #333;
font-weight: 580;
.birthday {
color: #666666;
margin-left: 5%;
font-weight: 400;
}
}
.nick-name-lab {
width: 17.1%;
}
.city-lab {
width: 34.1%;
}
.city-val {
line-height: 100%;
}
.hometown-lab {
width: 22%;
}
}
.row-left {
width: 55.7% !important;
.details-val {
margin-left: 4%;
}
}
.row-right {
flex: 1;
.details-val {
margin-left: 6%;
}
}
}
.user-info-row:nth-child(1) {
margin-top: 7.3%;
}
.user-info-row:nth-child(4) {
margin-bottom: 0;
}
.line {
width: 100%;
height: 1px;
}
}
.expectations {
position: absolute;
left: 16.8%;
bottom: 15.7%;
width: 34.4%;
height: 11.8%;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 14px;
font-weight: 400;
color: #333;
}
.code_container {
position: absolute;
height: 20.7%;
width: 25%;
bottom: 13.5%;
right: 16%;
display: flex;
flex-direction: column;
text-align: center;
.code_img {
height: 77%;
width: 93%;
}
.qr_code_content {
font-size: 10px;
font-weight: 580;
margin-top: 10%;
color: #333333;
}
}
}
}
}
@mixin template_2 {}
.print {
.template_1 {
@include template_1;
.profile-card {
position: relative;
width: 450px;
height: 636px;
}
}
}
.footer {
display: flex;
justify-content: space-between;
padding: 15px;
}
@media print {
.template_1 {
@include template_1;
.profile-card {
position: relative;
width: 1800px;
height: 100vh;
.user-info {
top: 36% !important;
.user-info-row {
margin: 5% 0 !important;
.details-lab {
font-size: 1.5rem !important;
}
.details-val {
font-size: 1.5rem !important;
}
.city-lab {
width: 34% !important;
}
.city-val {
line-height: 120% !important;
margin-left: 3.5% !important;
transform: translateY(-12%);
}
.hometown-val {
line-height: 120% !important;
transform: translateY(-10%);
}
}
}
.expectations {
font-size: 1.5rem !important;
}
.qr_code_content {
font-size: 1rem !important;
}
}
}
}
</style>
4. 父級(jí)組件使用
<template>
<PrintUser v-if="isShowPrint" :id="id" :logo :male :female :gender="gender" @cancel="printCancel"/>
</template>
<script setup lang="ts">
import logo from '@/assets/images/logo.png'
import male from '@/assets/images/male.png'
import female from '@/assets/images/female.png'
const id = ref<string>('')
const isShowPrint = ref<boolean>(false)
const gender = ref<any>(1)
const showPrintUser = (row: any) => {
isShowPrint.value = true
id.value = row.user_id
gender.value = row.gender
}
const printCancel = ()=>{
isShowPrint.value = false
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對(duì)比的代碼詳解
這篇文章主要為大家詳細(xì)介紹了在vue3中使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對(duì)比,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的小伙伴可以參考一下2023-12-12
element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
setup是Vue3中引入的一個(gè)新的組件選項(xiàng)，是Vue3中函數(shù)式組件的核心部分，它提供了一種新的方式來(lái)編寫(xiě)組件邏輯，下面就來(lái)和大家講講它的使用和原理2023-08-08
隨著 JavaScript 語(yǔ)言的快速演進(jìn),許多現(xiàn)代特性在低版本瀏覽器中無(wú)法運(yùn)行,本文將詳細(xì)介紹如何使Vue3和TypeScript讓項(xiàng)目完美兼容 IE11等低版本瀏覽器,有需要的小伙伴可以參考一下2025-04-04
webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟
這篇文章主要介紹了webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟，詳細(xì)的介紹了兩種調(diào)試vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題
本文主要介紹了將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue.js引入外部CSS樣式和外部JS文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式
這篇文章主要介紹了vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue.js計(jì)算機(jī)屬性computed和methods方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js計(jì)算機(jī)屬性computed和methods方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來(lái)引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來(lái)引入多個(gè)，單個(gè)的文件，下面通過(guò)本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11