文章来源地址https://www.toymoban.com/news/detail-492810.html
编辑排版 | 宋大狮
平台运营 | 小唐狮
ONE 问题描述
2023年4月22号记，久违了大家。
今天要和大家分享的是关于如何实现表单、表格等自定义内容的打印功能。
最近在后台项目中，有遇到打印详情页的需求，因为开发中此功能用的次数不多，所以放在此处仅做一下记录，以供大家查阅。
具体的需求：在表格的操作栏中，点击打印按钮，会弹出一个对话弹框，弹框里会预览要打印的详情内容，然后在弹框中可以点击确认打印，可以点击取消关闭。
具体的问题：1、点击打印按钮，弹出的对话弹框中的内容总是显示第一次打开时的内容，不会重新变化；2、如何实现打印功能；3、如何实现只打印对话弹框中的指定内容。
今天，我们就在这篇文章，用最简洁的语言，来好好地理理上述问题。
TWO 问题解决
一、代码总览
1、打印功能实现代码
1、安装依赖vue3-print-nb
npm install vue3-print-nb --save
2、main.ts中添加
import print from "vue3-print-nb";
.use(print)
3、布局中添加
要打印的内容，最外层盒子加上id
<div class="mod-sys_country__syscountry" id="printMe">
打印按钮
<button v-print="printObj">Print local range</button>
4、逻辑中添加相关配置
data(){
return {
printObj: {
id: "printMe",
popTitle: '',
extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
}
}
},
5、样式中添加
<style media="print">
@page{
size: auto;
margin-bottom: 0;
}
</style>
2、弹出的对话框实现代码
1、弹出的对话弹框
<el-dialog v-model="dialogFormVisible" title="Shipping address" destroy-on-close>
2、要打印的内容，此处封装成了组件
<printCustomerDetail :printId="printId" :AuditMethod="AuditMethod" :printLevel="printLevel" ref="printRef"> </printCustomerDetail>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
3、确认打印按钮，点击开始打印
<el-button type="primary" @click="dialogFormVisible = false" v-print="printObj"> Confirm </el-button>
</span>
</template>
</el-dialog>
二、问题解析
1、问：点击打印按钮，弹出的对话弹框中的内容总是显示第一次打开时的内容，不会重新变化。
答：这是element的Dialog 组件本身存在的问题， dialog作为父组件调用子组件时，仅仅只渲染一次，就不再进行渲染。解决的方法有两种，一种是在Dialog 组件中添加属性destroy-on-close，默认为false，功能是当关闭 Dialog 时，销毁其中的元素；一种是在Dialog 组件外边加上一个div标签，加上v-if ，条件和Dialog 出现的条件一致，这样每次渲染完都会进行摧毁，再重新调用组件，每次都会重新进行渲染。
2、问：如何实现打印功能。
答：使用vue3-print-nb库的v-print指令。
3、问：如何实现只打印对话弹框中的指定内容。
答：对要打印的内容，最外层盒子加上id，并在配置中指定对应的id。
- END -文章来源：https://www.toymoban.com/news/detail-492810.html
到了这里，关于vue3问题：如何实现打印功能？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
