一、功能背景

vue项目支持打印快递面单功能，需进行优化支持一次打印多张面单；

打印面单.png

二、实现思路

1.后台配合提供一次获取多张面单信息的接口；
2.获取多张面单数据后，通过v-for遍历渲染dom，根据不同物流公司类型判断展示不同面单结构；
3.为兼容不同项目框架，使用iframe调起打印。组件dom添加iframe，点击打印时将第二部渲染的dom嵌入当前iframe的body中，调用print()方法；
4.因为面单高度不完全固定，为防止某页出现半张面单的情况，css限制最大高度并在每张单子之后增加分页。

三、组件实现过程

express-sheet.vue

<template>
    <iframe id="print-iframe"></iframe>
   <div class="express-sheet" id="expressSheetCon">
         <div v-for="item in printArr" :key="item.printKey">
            <!-- 面单内容-->
         </div>
    </div>
</template>
<script>
export default{
  name:'ExpressSheet',
  props: {
    //获取面单内容需要的参数
  },
  data:{
    printArr:[]
  }，
  methods:{
    getSheetData:()=>{
      //获取printArr内容并进行格式处理
    },
    //调起打印
    onPrint:()=>{
      let iframe = document.getElementById('print-iframe').contentWindow;
      addHeadStyle(iframe);   //添加样式
      sheetPrint(iframe);     //嵌入打印dom 并调用打印
    }，
    addHeadStyle:()=>{
      let style = document.createElement('style');
      let styleText = ``;  //面单内部样式
      style.innerHTML = styleText;
      iframe.document.head.appendChild(style);
    },
    sheetPrint:()=>{
      let printDom = document.getElementById('expressSheetCon').outerHTML;
      iframe.document.body.outerHTML = printDom;
      iframe.print();
      printComplete();  //完成后通知父组件（回调，并重置数据）
    }
  }
}
</script>

四、组件使用方法

//引入组件
import { ExpressSheet } from 'components-package';    //components-package:项目组件库
export default {
  //...,
  ExpressSheet
}
//printComplete方法自行定义
//  dom:
<div v-show="false">
    <express-sheet 
    :prop1="expressPrintData.prop1" 
    :prop2="expressPrintData.prop2" 
    @complete="printComplete"
    ></express-sheet>
  </div>

五、遇到的问题及解决方式

• 面单dom嵌入iframe之后无法获取样式
  将样式写在模板字符串中，addHeadStyle方法append到iframe里面；
  或者也可以通过link方式，将外部css文件引入放到iframe下，eg:

  let linkTag = document.createElement('link');
  linkTag.href ='./css/express-sheet.css'; 
  linkTag.setAttribute('rel','stylesheet');
  linkTag.setAttribute( 'type','text/css'); 
  iframe.document.head.appendChild(linkTag);
  

  但是该方法要求路径须准确，且打包后css文件可找到，样式不多的情况优选当前文件style嵌入方式
• 半页分页处理
  每个面单最外层dom添加page-break-after样式
• 未打印时不显示面单
  外层增加dom并设置隐藏（v-show='false'）
• 多次打印面单缓存或重复打印
  完成后回调，重置数据