vue展示调打印机

作者: 实质xing | 来源:发表于2020-05-15 15:07 被阅读0次

    一切问题存在时,都比想得困难,解决了都比想得简单
    记录一下当时遇到的问题:
    1,开始调打印机的时候,数据是写死的所有,直接调用打印机就打印出来了。但是当我获取后端返回来的数据时,只能获取到写的死数据。

    死数据当时调用写法(不做参考,只是为了本人记录)
    例如:

     <div id="qrCode"  ref='printModel' class="modelPrint">
          <div style="page-break-after:always;"><!--page-break-after:always;这个是分页符,就是打印很多张的时候,为了确保每张显示的内容-->
            <div  style="width: 450px;padding: 0px 20px;margin-top:12px;">
              <div style="text-align: center;font-weight: 700;">产品合格证名称</div>
              <div style="display: flex;align-items: center; padding-left: 15px;">
                <div style="text-align: center;">
                <div style="margin-left: 15px;font-size: 14px;padding-right: 4px;">
                  <p style="margin-bottom:0px;margin-top:7px;">产品名称: 猕猴挑</p>
                  <p style="margin-bottom: 2px;margin-top:7px;">生产批次: 123443522</p>
                  <p style="margin-bottom: 2px;margin-top:7px;">开证日期: 2020.05.15 12:20:40</p>
                  <p style="margin-bottom: 2px;margin-top:7px;">生产厂家: 实质性</p>
                  </div>
                  <p style="margin-bottom: 2px;margin-top:7px;">追&nbsp;&nbsp;溯&nbsp;&nbsp;码: 29128384392</p>
                </div>
              </div>
              <div style="text-align: center; font-weight: 700;margin-top: 3px;">[生产经营主体对追溯信息真实性负责]</div>
            </div>
          </div>
        </div>
        <button @click=‘print’>打印</button>
    

    methods方法

    print(){
                  var newWin = window.open("") // 新打开一个空窗口
                   this.imageToPrint = document.getElementById('qrCode') // 将要被打印的内容(特别注意这个获取方式)
                  newWin.document.write(this.imageToPrint.outerHTML) // 将打印的内容添加进新的窗口
                  newWin.document.close() // 在IE浏览器中使用必须添加这一句
                  newWin.focus() // 在IE浏览器中使用必须添加这一句
                  setTimeout(function() {
                    newWin.print() // 打印
                    newWin.close() // 关闭窗口
                  }, 100)
    }
    

    以上就可以打印上面死数据的内容,但是怎么可能只打印写好的数据。

     <div id="qrCode"   ref='printModel' class="modelPrint">
          <div v-for="(item,index) in printData" :key='index' style="width: 450px;page-break-after:always;">
            <div  style="width: 450px;padding: 0px 20px;margin-top:12px;">
              <div style="text-align: center;font-weight: 700;">产品合格证名称</div>
              <div style="display: flex;align-items: center; padding-left: 15px;">
                <div style="text-align: center;">
                <div style="margin-left: 15px;font-size: 14px;padding-right: 4px;">
                  <p style="margin-bottom:0px;margin-top:7px;">产品名称: {{item.name}}</p>
                  <p style="margin-bottom: 2px;margin-top:7px;">生产批次: {{item.batch}}</p>
                  <p style="margin-bottom: 2px;margin-top:7px;">检验方式: {{item.quality}}</p>
                  <p style="margin-bottom: 2px;margin-top:7px;">开证日期: {{item.licenceDate}}</p>
                  </div>
                </div>
              </div>
              <div style="text-align: center; font-weight: 700;margin-top: 3px;">[生产经营主体对追溯信息真实性负责]</div>
            </div>
          </div>
        </div>
    

    methods方法

    print(){
                  var newWin = window.open("") // 新打开一个空窗口
                   // this.imageToPrint = document.getElementById('qrCode') 将要被打印的内容写静态的时候这样获取是可以的,动态就获取不到了,要换一张获取方式
                  this.imageToPrint = this.$refs.printModel  //用这个方式来获取
                  newWin.document.write(this.imageToPrint.outerHTML) // 将打印的内容添加进新的窗口
                  newWin.document.close() // 在IE浏览器中使用必须添加这一句
                  newWin.focus() // 在IE浏览器中使用必须添加这一句
                  setTimeout(function() {
                    newWin.print() // 打印
                    newWin.close() // 关闭窗口
                  }, 100)
    }
    

    print()这个是请求后端数据之后的打印方法,我这里没有写获取打印数据的接口。
    这里样式说一下,我是写的行内。也可以是其他方法,但是直接在页面正常写class,在打印页面是无效的。

    相关文章

      网友评论

        本文标题:vue展示调打印机

        本文链接:https://www.haomeiwen.com/subject/wyscohtx.html