1.自定义打印完成

loulijun2021

2022-07-28 9193459fbb692abc227b1643ae52f65a2e782ebd

 src/views/kb/printMe.vue

ÎļþÃû´Ó src/views/kb/index.vue ÐÞ¸Ä
@@ -6,7 +6,7 @@
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="1140"
      width="812px"
    >
      <!-- è¦æ‰“印的区域 -->
      <div id="printMe" style="padding: 30px">
@@ -42,60 +42,52 @@
          id="table"
          :data="tableData"
          border
          :header-cell-style="{ background: '#c0c0c0',textAlign:'center',color:'#000'}"
          :cell-style="{textAlign: 'center',color:'#000',}"
          class="elTable"
          style="width: 100%;"
        >
          <el-table-column
            id="column0"
            prop="date"
            label="日期"
            width="100"
            prop="id"
            label="工序号"
            width="70"
          />
          <el-table-column
            id="column1"
            prop="name"
            label="姓名"
            prop="stepcode"
            label="工序二维码"
            width="100"
          />
          <el-table-column
            id="column2"
            prop="address"
            label="地址"
            width="150"
            prop="stepname"
            label="工序"
            width="120"
          />
          <el-table-column
            id="column3"
            prop="address"
            label="地址"
            width="150"
            prop="plan_qty"
            label="加工数量"
            width="100"
          />
          <el-table-column
            id="column4"
            prop="address"
            width="150"

            label="地址"
            prop="good_qty"
            width="100"
            label="合格数量"
          />
          <el-table-column
            id="column5"
            width="150"

            prop="address"
            label="地址"
            width="100"
            prop="ng_qty"
            label="不良数量"
          />
          <el-table-column
            id="column6"
            prop="address"
            prop="desc"
            width="120"

            label="地址"
          />
          <el-table-column
            id="column7"
            width="119"

            prop="address"
            label="地址"
            label="备注"
          />
        </el-table>
      </div>
@@ -226,7 +218,7 @@
      },
      QRImgUrl: '',
      QRlink: 'www.xxx.com',
      dialogVisible: false,
      dialogVisible: true,
      printObj: {
        id: 'printMe',
        popTitle: '打印模板',
@@ -283,23 +275,10 @@
        // standard: '',
        // extraCss: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 å¼„'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 å¼„'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }],
      tableData: [
        { id: 1, stepcode: '001', stepname: '领料', plan_qty: 100, good_qty: 10, ng_qty: 5, desc: '合格' },
        { id: 2, stepcode: '001', stepname: '领料', plan_qty: 100, good_qty: 10, ng_qty: 5, desc: '合格' }
      ],
      printContentObj: {}
    }
  },
@@ -311,9 +290,9 @@
    // å¦‚æžœWEB报表客户端程序为开机自启动，以下调用应该去掉。更多说明请参考帮助“WEB报表(B/S报表)->WEB报表客户端->部署与安装”部分中与谷歌Chrome浏览器的相关说明
    webapp_urlprotocol_startup() // å¯åŠ¨WEB报表客户端程序，以便侦听接受 WebSocket æ•°æ®
    // }
    // this.$nextTick(() => {
    //   this.bindQRCode()
    // })
    this.$nextTick(() => {
      this.bindQRCode()
    })
  },
  methods: {
    // addWatermark() {
@@ -324,32 +303,32 @@
    //   }
    // },
    clickMe() {
    //   this.dialogVisible = true
    //   this.$nextTick(() => {
    //     this.bindQRCode()
    //     this.addWatermark()
    //     console.log(document.getElementById('column0').style.width = '200px', 0)
    //     console.log(document.getElementById('column7'), 7)
    //     console.log(document.getElementById('table'), 2)
    //     console.log(document.getElementById('table').getElementsByTagName('el-table'), 1)
    //   })
      //   this.dialogVisible = true
      //   this.$nextTick(() => {
      //     this.bindQRCode()
      //     this.addWatermark()
      //     console.log(document.getElementById('column0').style.width = '200px', 0)
      //     console.log(document.getElementById('column7'), 7)
      //     console.log(document.getElementById('table'), 2)
      //     console.log(document.getElementById('table').getElementsByTagName('el-table'), 1)
      //   })
      this.dialogVisible = true
    },
    // bindQRCode() {
    //   if (this.firstbindQRCode) {
    //     const text = 'PO202206280001;Step02'
    //     new QRCode(this.$refs.qrCodeDiv2, {
    //       // text: 'Vue实现生成二维码！',
    //       text: text,
    //       width: 80,
    //       height: 80,
    //       colorDark: '#333333', // äºŒç»´ç é¢œè‰²
    //       colorLight: '#ffffff', // äºŒç»´ç èƒŒæ™¯è‰²
    //       correctLevel: QRCode.CorrectLevel.L// å®¹é”™çŽ‡ï¼ŒL/M/H
    //     })
    //     this.firstbindQRCode = false
    //   }
    // },
    bindQRCode() {
      if (this.firstbindQRCode) {
        const text = 'PO202206280001;Step02'
        new QRCode(this.$refs.qrCodeDiv, {
          // text: 'Vue实现生成二维码！',
          text: text,
          width: 80,
          height: 80,
          colorDark: '#333333', // äºŒç»´ç é¢œè‰²
          colorLight: '#ffffff', // äºŒç»´ç èƒŒæ™¯è‰²
          correctLevel: QRCode.CorrectLevel.L// å®¹é”™çŽ‡ï¼ŒL/M/H
        })
        this.firstbindQRCode = false
      }
    },
    async TestClick() {
      const data = {
        mesordercode: 'PO202206280001_4',
@@ -433,5 +412,14 @@
/*/deep/.el-table__body-wrapper::-webkit-scrollbar{*/
/*  width: 0;*/
/*}*/

/*.el-table--border,.el-table--fit{*/
/*  border-right:  1px solid #000 !important;*/
/*  border-bottom:  1px solid #000 !important;*/
/*}*/
/*.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{*/
/*  border-left:   1px solid #000 !important;*/
/*  border-top:   1px solid #000 !important;*/
/*}*/
</style>