业务要求

选择某一条订单，点击打印按钮，弹出一个框显示需要打印出来的内容，
底部存在两个按钮，取消（关闭弹框）打印（调电脑自身的打印预览）

出现的问题

• 打印预览时，没有表格边框,样式丢失
  原因：
  当表被复制到一个新窗口时，css样式不会被保留。
  可以将一些需要设置的css样式通过拼接用document.write方法中即可解决

• 打印预览时，页眉显示当天日期和网页标题名字，页尾显示当前的网址
  解决：
  可以直接通过css样式解决

<style media="print">
   @page {
     size: auto;  
     margin: 0mm;  //具体的上下左右边距可以根据实际要求微调
   }
</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();
      },