vue3问题：如何实现打印功能？

 

编辑排版 | 宋大狮

平台运营 | 小唐狮

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 -