vue展示调打印机

一切问题存在时，都比想得困难，解决了都比想得简单
记录一下当时遇到的问题：
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，在打印页面是无效的。