window.print() 浏览器打印

记录最近新接触的知识点，实现浏览器分页打印~~~

一、如何设置分页

1. page-break-before: always ，元素前添加分页符；

@media print {
	div {
			page-break-before: always;
		}
} 
 复制

2. page-break-after: always ，元素后添加分页符；

@media print {
	div {
			page-break-after: always;
		}
} 
 复制

注: 元素后添加分页符，最后一个元素不需要添加

二、打印设置

1、打印布局

@media print {
	@page {
	/* 纵向展示（高度展示内容更多） */
	/* size: portrait;*/
	/* 横向（宽度展示内容更大） */
	size: landscape;
	/* 打印的边距 上右下左 */
	margin: 1cm 2cm 1cm 2cm;
	}
} 
 复制

2、打印样式
默认情况下，基于页面上的内容，会将元素，布局和样式都进行打印
如需设置特殊样式，使用媒介查询实现

@media print {
	p{
		color: lavender;
		background: #ccc;
	}
	h1{
		color: lightblue;
		background: #ccc;
	}
} 复制

注意：
页面高度需要设置为auto

body {
height: auto;
}复制

三、完整代码

<template>
  <div class="box">
    <div class="first-page">我是第一页</div>
    <div class="title-style">我是第二个分页</div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
      };
    },
    created() {
      this.print();
    },
    methods: {
      print() {
        window.print();
      },
    },
  };
</script>
<style>
  body {
    height: auto;
  }
</style>
 
<style scoped>
  .box {
    box-sizing: border-box;
    text-align: center;
    max-width: 1123px;
  }
  @media print {
    @page {
      size: landscape;
      margin: 10px;
    }
    .first-page{
      background: #f40;
      color: #fff;
      text-align: center;
      page-break-after: always;
    }
    .title-style {
      font-size: 12px;
      font-weight: 600;
      height: 50px;
      line-height: 50px;
    }
  }
</style>复制