一翅睛、功能背景

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

打印面單.png

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

1.后臺(tái)配合提供一次獲取多張面單信息的接口；
2.獲取多張面單數(shù)據(jù)后很魂，通過v-for遍歷渲染dom扎酷，根據(jù)不同物流公司類型判斷展示不同面單結(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)槊鎲胃叨炔煌耆潭ǎ瑸榉乐鼓稠摮霈F(xiàn)半張面單的情況帝蒿，css限制最大高度并在每張單子之后增加分頁荐糜。

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

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>

五偏序、遇到的問題及解決方式

• 面單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);
  

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