调用浏览器打印

调用浏览器打印

<template>
  <view class="content" id="home">
		<button style="margin: 10px 10px" v-if="isShow" @click="print">打印</button>
		<ul class="print-ul">
			<li
			  v-for="(item, index) of printList"
			  :key="index"
			  :id="'printDiv' + index"
			  style="page-break-after: always;">
			  <div style="border: 1px solid #000; padding: 4px 7px; margin: 3px">
				<p>名称：{{item.name}}</p>
				<p>价值：{{item.originValue}}</p>
				<p>部门：{{item.deptName}}</p>
				<p>时间：{{item.gainTime}}</p>
			  </div>
			</li>
		</ul>
  </view>
</template>
	
<script>
  export default {
    data() {
      return {
          isShow: true,
		  printList: [
			  {
				  name: '笔记本',
				  deptName: '技術部',
				  originValue: 10000,
				  gainTime: '2012-10-10'
			  }
		  ]
      }
    },
    methods: {
		beforePrint() {
		  console.log('beforePrint')
		},
		afterPrint() {
		  console.log('afterPrint')
      		this.isShow = false
		},
		print() {
		  let that = this
		  //打印回调函数
		  if (window.matchMedia) {
			let mediaQueryList = window.matchMedia('print')
			mediaQueryList.addListener(function (mql) {
			  if (mql.matches) {
				that.beforePrint()
			  } else {
				that.afterPrint()
			  }
			})
		  }
		  this.isShow = true
		  this.$forceUpdate()
		  setTimeout(() => {
			window.print()
		  }, 500)
		},
    }
  }
</script>

<style lang="scss" scoped>
body {
  color: #000 !important;
}
#home {
  background-color: #fff;
  height: 100%;
}
li {
  list-style: none;
}
p {
  margin: 10px 0;
  padding: 0;
}
// 794×1123
// 1487
.print-ul {
  width: 794px;
  display: flex;
  flex-wrap: wrap;
  li {
    // padding: 0 34px;
    border: 1px solid #000;
    margin: 4px;
    list-style: none;
  }
}
@media print {
  #print-container {
    display: block;
  }
 /*  #home {
     zoom: 0.9;
  } */
}
@page {
  /* 纵向 */
  size: portrait;
  /* 边距 上右下左 */
  margin: 3mm 3mm 3mm 3mm;
}
</style>