業(yè)務(wù)要求

選擇某一條訂單禽翼，點(diǎn)擊打印按鈕闰挡，彈出一個(gè)框顯示需要打印出來的內(nèi)容贮匕，
底部存在兩個(gè)按鈕花枫，取消（關(guān)閉彈框）打永秃病（調(diào)電腦自身的打印預(yù)覽）

出現(xiàn)的問題

• 打印預(yù)覽時(shí)佳簸，沒有表格邊框,樣式丟失
  原因：
  當(dāng)表被復(fù)制到一個(gè)新窗口時(shí)听想，css樣式不會(huì)被保留汉买。
  可以將一些需要設(shè)置的css樣式通過拼接用document.write方法中即可解決

• 打印預(yù)覽時(shí)蛙粘，頁眉顯示當(dāng)天日期和網(wǎng)頁標(biāo)題名字出牧，頁尾顯示當(dāng)前的網(wǎng)址
  解決：
  可以直接通過css樣式解決

<style media="print">
   @page {
     size: auto;  
     margin: 0mm;  //具體的上下左右邊距可以根據(jù)實(shí)際要求微調(diào)
   }
</style>

完整代碼如下

let printPageContent = this.$refs['printPage'].$el;
        let printCss= '' +
            '<style media="print">' +
              '@page {' +
                'size: auto;' +
                'margin: 20px 20px 0mm;' +
              '}' +
            '</style>' +
            '<style type="text/css">' +
              'table th, table td {' +
                'border:1px solid #000;' +
              '}' +
              'table {' +
                'border-collapse: collapse;' +
                'border: 1px solid #000000;' +
                'width: 900px;' +
                'margin: 0 auto;' +
              '}' +
              'td {' +
                'border-collapse: collapse;' +
                'border: 1px solid #000000;' +
                'padding: 3px;' +
                'font-size: 14px;' +
              '}' +
              'h1 {' +
                'font-size: 18px;' +
                'line-height: 36px;' +
                'padding: 0;' +
                'text-align: center;' +
              '}' +
            '</style>';
        let iframe;
        if(!!document.getElementById('printArea')){
          iframe = document.getElementById('printArea')
          iframe.contentWindow.document.body.innerHTML = ""
        }else{
          iframe = document.createElement('iframe')
          iframe.id = 'printArea'
          document.body.appendChild(iframe)
        }
        printCss += printPageContent.outerHTML;
        iframe.contentWindow.document.write(printCss);
        iframe.contentWindow.print();
        iframe.contentWindow.close();
      },