前端打印页面部分内容、指定份数

点击打印跳转至新页面调用window.print

将需打印页面的所有参数放置路由跳转参数中

this.qrParams.printnum = this.printDetail.printnum// 填写的打印份数
this.$router.push({
	path: '/xxxx',//跳转路径
	query: {
		printDetail: this.printDetail, // 打印内容，需展示的数据
		qrParams: this.qrParams, // 填写的打印份数
	}
)}

跳转页面代码逻辑

举个栗子，打印内容有图片和二维码（只有二维码生成，没有二维码实现）、文字
需等待图片加载完成再调用打印页面/图片加载不出来也需调用打印页面
等待二维码加载完成再调用打印页面

//整个循环框，需打印多少份就循环多少次
<div v-for="(item,i) in arr" :key="i" class="dialog-top">
	<el-image :src="item.logourl" @load="imgLoad" @error="imgError" />	//图片
    <div>{{ item.couponname }}</div> //文字
    <div ref="qrCode"/></div> //二维码
</div>
export default {
  data() {
    return {
      printDetail: this.$route.query,//跳转页面参数
      printDetail: {},
      arr: [],//循环内容
      index:0,//图片加载张数
      timeout:null//定时器
    }
  },
  watch: {
    // 监听图片是否加载完成
    index(newValue) {
      if (newValue == this.printDetail.printnum ) {
        this.$loading({ text: 'loading' }).close()//加载完成关闭loading加载页面
        this.$nextTick(() => {
          this.print()
        })
      }
    },
  },
  mounted() {
    this.$loading({ text: 'loading' }) //未加载完成先显示loading加载页面
    for (let i = 0; i < Number(this.printDetail.printnum); i++) {
      this.arr.push(this.printDetail)
    }
    window.onafterprint = () => { //打印完成跳回原页面
      this.$router.replace('/xxxxxx')
    }
  },
  destroyed() {
    clearTimeout(this.timeout)
  },
  methods: {
    // 定时器等待二维码加载完成再调用打印机
    print() {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        window.print()
      }, 0)
    },
    // 图片加载事件
    imgLoad() {
      this.index++
    },
    // 图片加载失败回调
    imgError() {
      this.index = this.printDetail.printnum
    }
}