一、功能背景

vue項(xiàng)目支持打印快遞面單功能，需進(jìn)行優(yōu)化支持一次打印多張面單；

打印面單.png

二、實(shí)現(xiàn)思路

1.后臺(tái)配合提供一次獲取多張面單信息的接口；
2.獲取多張面單數(shù)據(jù)后，通過(guò)v-for遍歷渲染dom，根據(jù)不同物流公司類(lèi)型判斷展示不同面單結(jié)構(gòu)；
3.為兼容不同項(xiàng)目框架，使用iframe調(diào)起打印。組件dom添加iframe，點(diǎn)擊打印時(shí)將第二部渲染的dom嵌入當(dāng)前iframe的body中，調(diào)用print()方法；
4.因?yàn)槊鎲胃叨炔煌耆潭?，為防止某?yè)出現(xiàn)半張面單的情況，css限制最大高度并在每張單子之后增加分頁(yè)。

三、組件實(shí)現(xiàn)過(guò)程

express-sheet.vue

<template>
    <iframe id="print-iframe"></iframe>
   <div class="express-sheet" id="expressSheetCon">
         <div v-for="item in printArr" :key="item.printKey">
            <!-- 面單內(nèi)容-->
         </div>
    </div>
</template>
<script>
export default{
  name:'ExpressSheet',
  props: {
    //獲取面單內(nèi)容需要的參數(shù)
  },
  data:{
    printArr:[]
  }，
  methods:{
    getSheetData:()=>{
      //獲取printArr內(nèi)容并進(jìn)行格式處理
    },
    //調(diào)起打印
    onPrint:()=>{
      let iframe = document.getElementById('print-iframe').contentWindow;
      addHeadStyle(iframe);   //添加樣式
      sheetPrint(iframe);     //嵌入打印dom 并調(diào)用打印
    }，
    addHeadStyle:()=>{
      let style = document.createElement('style');
      let styleText = ``;  //面單內(nèi)部樣式
      style.innerHTML = styleText;
      iframe.document.head.appendChild(style);
    },
    sheetPrint:()=>{
      let printDom = document.getElementById('expressSheetCon').outerHTML;
      iframe.document.body.outerHTML = printDom;
      iframe.print();
      printComplete();  //完成后通知父組件（回調(diào)，并重置數(shù)據(jù)）
    }
  }
}
</script>

四、組件使用方法

//引入組件
import { ExpressSheet } from 'components-package';    //components-package:項(xiàng)目組件庫(kù)
export default {
  //...,
  ExpressSheet
}
//printComplete方法自行定義
//  dom:
<div v-show="false">
    <express-sheet 
    :prop1="expressPrintData.prop1" 
    :prop2="expressPrintData.prop2" 
    @complete="printComplete"
    ></express-sheet>
  </div>

五、遇到的問(wèn)題及解決方式

• 面單dom嵌入iframe之后無(wú)法獲取樣式
  將樣式寫(xiě)在模板字符串中，addHeadStyle方法append到iframe里面；
  或者也可以通過(guò)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);
  

  但是該方法要求路徑須準(zhǔn)確，且打包后css文件可找到，樣式不多的情況優(yōu)選當(dāng)前文件style嵌入方式
• 半頁(yè)分頁(yè)處理
  每個(gè)面單最外層dom添加page-break-after樣式
• 未打印時(shí)不顯示面單
  外層增加dom并設(shè)置隱藏（v-show='false'）
• 多次打印面單緩存或重復(fù)打印
  完成后回調(diào)，重置數(shù)據(jù)