VUE打印小记

先安装

npm install vue-print-nb --save

然后main.js引入

import Print from 'vue-print-nb'
Vue.use(Print)

配置

<el-button icon="el-icon-refresh" size="mini" v-print="printSettings">打印</el-button>
<el-table  id="printMe">
data() {
      return {
printSettings:{
          id: 'printMe',
          popTitle: '', // 打印配置页上方的标题
          // extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
          // preview: true, // 是否启动预览模式，默认是false
          // previewTitle: '预览的标题', // 打印预览的标题
          // previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
          zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
          standard: '',
          extarCss: '',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>'
        }
      };
	}
}
<style media="print">
  @page {
    size: auto;
    margin: 3mm;
  }
  @media print {
    html {
      background-color: #ffffff;
      height: auto;
      margin: 0px;
    }
    body {
      border: solid 1px #ffffff;
      /* margin: 10mm 15mm 10mm 15mm; */
    }
    #printMe table {
      table-layout: auto !important;
    }
    #printMe .el-table__header-wrapper .el-table__header {
      width: 100% !important;
      border: solid 1px #f2f2f2;
    }
    #printMe .el-table__body-wrapper .el-table__body {
      width: 100% !important;
    }
    #printMe #pagetable table {
      table-layout: fixed !important;
    }
  }
</style>