vue中实现打印功能的方法与注意事项

一、使用方法：
- 1. 在HTML中
- 2. 在VUE项目中
二、问题总结
- 1. 设置打印方向
- 2. 设置打印高度
- - 1. 单张打印
  - 2. 循环打印
- 3. 获取打印操作的回调
- 4. 添加强制分页
- 5. 媒体查询设置打印样式常用内容：

常见的实现打印的方式：
1.javaSript 的 window.print() ------------打印范围不可控
2.C-Lodop （打印插件） -----------------要装插件太麻烦
3.jquery.PrintArea.js打印 -----------------简单易用

项目采用的实现方式：第三种，引用jquery.PrintArea.js打印插件

一、使用方法：

1. 在HTML中

1.引入要用的js

<script type="text/javascript" src="../jquery/jquery.PrintArea.js"></script>

2.设置要打印的区域， html+css语句实现打印内容的绘制，id定义打印区域

<div id="print">//打印区域------
</div>

3.打印语句，通过id获取元素实现打印

$("#print").printArea();

2. 在VUE项目中

将需要打印的页面绘制成组件，在需要实现打印功能的页面引入。

  <!-- 实例化引用的打印组件   --><print-index style="display: none;" ref="PrintIndex"/><!--  引入打印组件   -->import PrintIndex from '@/components/Print/index'<!--  引入打印插件   -->
import Print from '@/utils/printarea.js';<!--  注册组件   -->components: {PrintIndex},<!--  点击打印按钮，调用打印方法，先通过$refs方法给组件赋值，然后 new Print（）调用打印方法 -->async handleOk() {await this.$refs.PrintIndex.see(this.printDatas);console.log("打印中");this.$nextTick(() => {let print = new Print({el: "#PrintIndex",});})},

二、问题总结

1. 设置打印方向

横向：landscape；
纵向：portrait ；
自定义：auto ；
定义为A4纸：A4
更多配置及具体描述参见此链接

@page {size: auto; // 自定义// size:a4;//定义为a4纸// margin:0 0 0 50px;//页面的编剧
}//定义纸张旋转
#PrintIndex{page: rotated; //引用旋转page-break-before:avoid;//前面不加空页page-break-after:avoid;//后面不加空页
}

*注：应尽可能不在@page{}事件中，定义当前页面打印内容的特殊样式，全局有多个打印组件、组件内多次定义了@page{}时，可能会引起正式环境打印样式的混乱，页面方向和间距可能会互相影响。

2. 设置打印高度

1. 单张打印

直接调用即可，一般不会出现什么问题。

2. 循环打印

当打印需要实现多个页面内容同时打印且分别需要循环时（如：打印单据，有五种单据样式，每种单据有多张，打印时需要将五种单据的全部数据同时打印）

如果打印的内容一页对应一条数据，那可以直接给组件高度设置为100vh，然后在组件外层添加循环操作。
如果打印内容，多条数据对应一页（比如一张纸打印三条单据时），此时应给组件的外层设置一个动态高度，否则可能会出现打印内容重叠的情况。动态样式设置方法：

<div><!--    设置打印id --><div id="PrintIndex"><!--    动态设置高度 --><div :style="{height: bodyHeight}"><!--   数据循环 --><div v-for='(item,index) in resultData' class="container"><!--   此处绘制打印内容 --></div></div></div>
</div>// 绑定动态样式
:style="{height: bodyHeight}"// 初始化时根据数据条数计算打印页面所占高度
this.bodyHeight = `${Math.ceil(res.length / 3) * 100}vh`

3. 获取打印操作的回调

在PrintArea.js文件中，this.settings对象中自己添加success: ()=>{}方法，并在 print()方法中添加"afterprint"时间监听，在监听中调用 this.settings.success()：

  print(PAWindow) {let paWindow = PAWindow;paWindow.addEventListener('afterprint', () => {console.log('print after')this.settings.success()})console.log('---调用打印 focus-----');paWindow.focus();paWindow.print();console.log('---调用打印 print-----');};

即可在页面调用打印时获取到打印操作的回调：

async handleOk() {await this.$refs.PrintIndex.see(this.printDatas);console.log("打印中");this.$nextTick(() => {let print = new Print({el: "#PrintIndex",success: () =>{// 打印时间的回调，打印后要进行的操作或判断写在这里}});})
},

*注：此打印方式是唤起浏览器自带的打印功能，点开后有“打印”和“取消”两个按钮，但无法监听到用户到底是进行了什么操作，success的回调只能监听到打印预览页面关闭的操作，即我们只能知道页面中成功唤起了打印页面后，打印的预览页面被关闭了。

*注：如果打印内容中有表格，为避免表格打印时，一行的内容被两张纸断开打印，需要给表格增加 break-inside: avoid属性。

4. 添加强制分页

如果打印的内容高度无法确定，且需要循环打印，为了保证打印的每一份内容都是独立的，不产生断页，需要在一次循环打印的内容尾部添加分页符，可以将下方语句放到循环打印的代码段最下方，即可实现分页效果。

<p style="page-break-after:always;"></p>

将打印内容转化为pdf预览的另一种方式

打印样式中不推荐使用背景，因为浏览器默认情况下并不能打印出CSS中的背景内容，只有当浏览器被设置可以打印背景的情况下才能打印出背（ie的高级选项中可选），如果需要使用此方式可以参照此链接
或此链接

打印网络资源图片不显示，解决方案：等待网络资源图片加载完成后，在打印，代码：

$(doc).find('.qrcode-down').load(function () {iframe.contentWindow.print();window.location.reload()
})

5. 媒体查询设置打印样式常用内容：

@media print {@page {/* 纵向打印 */// size: portrait;/* 横向打印 */size: landscape;/* 去掉页眉页脚*/margin-top: 0;margin-bottom: 0;}/* 告诉浏览器在渲染它时不要对框进行颜色或样式调整 */* {-webkit-print-color-adjust: exact !important;-moz-print-color-adjust: exact !important;-ms-print-color-adjust: exact !important;print-color-adjust: exact !important;}/*打印不显示打印按钮*/.print-button-container {display: none !important;}/* 伪类 :first 用于匹配到文档的第一页, 首页上页边距设置为 10cm */@page :first {margin-top: 10cm; }/* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 *//**/@page :left {margin-left: 2.5cm;margin-right: 2.7cm;}@page :right {margin-left: 2.7cm;margin-right: 2.5cm;}}