前端打印功能的实现

1.安装与使用

Vue2 Version:

npm install vue-print-nb --save

// Global instruction  main.js中全局引入
import Print from 'vue-print-nb'
Vue.use(Print);

//or
// Local instruction
import print from 'vue-print-nb'

directives: {
    print   
}

Vue3 Version:

npm install vue3-print-nb --save
// Global instruction 
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

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

基本使用

<div id="printTest">    
    打印测试 </div> 
<el-button v-print="'#printTest'">打印</el-button>

2.页眉页脚字符串问题

打印预览时发现页眉页脚会有页码 网址 undefined之类的字符

1. 直接利用样式解决，优点是简单粗暴，缺点是页面的上下边距都不存在了，就没有页面的上下留白了，看着打印出来的内容上下边距太窄 像下图设置为3mm就隐藏掉了页眉页脚

// 打印媒体查询
@media print {
  @page{
      size:  auto;
      margin: 3mm;
	}	
}

3.打印时内容显示不全问题

在实际页面中高度不够部分内容隐藏了，这时候需要将对应块的内容为隐藏滚动的内容显示为全显示，打印时隐藏的内容并不会打印，只会打印到页面直接展示出来的内容

// 打印媒体查询
@media print {
  @page{
      size:  auto;
      margin: 3mm;
	}
 body{ 
		height:auto;  //在实际页面中高度不够部分内容隐藏了
  }	   
}

4.打印时样式消失了

样式消失了的根本原因是写在打印内容外层的样式以及使用的一些框架的样式没有 在打印时 拿到的实际是打印块的iframe内容，如果明知道这块的内容需要打印，表格或者块内容不要使用任何UI框架以及其它外部scss或者less的内容,外部的类名拿不到，里面的所有样式拿不到， 要么单独根据api写上引入的样式地址，直方便便捷的方式是内联样式或者是写内部样式

<div class="box">
   <div id="printTest">
     <div class="print-style">打印的相关内容</div>
   <div>       
</div>
 <style lang="scss" scoped>
   .box { } //无效
   #printTest { } //无效
	.print-style { } //写在这里的有效果
 </style>

5.打印时需要根据内容分页及内容添加水印

打印时如果有多个表格或者多个内容块，可以通过计算进行分以及给每一页添加水印 实际情况根据设置按需调整

<div id="printTest">
    <div class="printPage printMark"  v-for="item in 5" :key="item" >
      打印的相关内容
    </div>
 <div>     

// 打印媒体查询
@media print {
  @page{
      size:  auto;
      margin: 3mm;
   }
  body{ 
	height:auto; 
  }
  .printPage {   
    height: 291mm;   //分页  根据实际
    position: relative; 
    &::before {
        position: absolute; content: 'xx水印'; top:20%; right: 5%;  font-size: 48px; opacity: 0.1;  transform: rotate(30deg);
    }
    &::after {
        position: absolute; content: 'xx水印'; bottom:20%; left: 5%;  font-size: 48px; opacity: 0.1;  transform: rotate(30deg);
    }
  }	
}

参考文章:

vue-print-nb · GitHub Topics

vue 打印 vue-print-nb - 简书 (jianshu.com)