vue3+ts 前端实现打印功能_vue3组合式api如何实现打印功能-优快云博客

本文链接：https://blog.youkuaiyun.com/hfyldx/article/details/134294556

本文介绍了如何在Vue3项目中安装并使用`vue3-print-nb`插件，展示了如何全局引用并配置打印功能，以实例化一个包含机房出入申请详细信息的弹出对话框，包括表格、图片和打印按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装插件
npm install vue3-print-nb --save
2.全局引用
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’)
例子

<template>
	<div>
		<el-dialog v-model="jfDialogVisible" title="机房出入详情" width="60%" @close="close">
			<div id="a">
				<img class="pass" v-if="params.applyStatus == '2'" src="../../../assets/images/pass.png" />
				<div class="title">申请信息：</div>
				<table>
					<tr>
						<th width="80px">申请单号：</th>
						<td>{
  { params.applyNumber }}</td>
						<th>状态：</th>
						<td>{
  { applyStatusEnum[params.applyStatus] }}</td>
					</tr>
					<tr>
						<th width="80px">申请时间：</th>
						<td>{
  { params.applyTime }}</td>
						<th>缓急：</th>
						<td>{
  { urgentFlagData[params.urgentFlag] }}</td>
					</tr>
					<tr>
						<th>申请人：</th>
						<td>{
  { params.applyUserName }}</td>
						<th width="80px">联系电话：</th>
						<td>{
  { params.mobilePhone }}</td>
					</tr>
					<tr>
						<th width="120px">所属单位团队：</th>
						<td colspan="3">{
  { params.unitTeam }}</td>
					</tr>
					<tr>
						<th width="80px">机房名称：</th>
						<td colsp