page-break-before（指定元素前添加分页符）
auto 默认值。如果必要则在元素前插入分页符。always在元素前插入分页符。avoid 避免在元素前插入分页符。left在元素之前足够的分页符，一直到一张空白的左页为止。right 在元素之前足够的分页符，一直到一张空白的右页为止。inherit 规定应该从父元素继承 page-break-before 属性的设置。
/* 在h1元素前始终插入分页符 */@media print {h1 {page-break-before: always;}}
page-break-after（指定元素后添加分页符）
auto 默认值。如果必要则在元素后插入分页符。always在元素后插入分页符。avoid 避免在元素后插入分页符。left在元素之后足够的分页符，一直到一张空白的左页为止。right 在元素之后足够的分页符，一直到一张空白的右页为止。inherit 规定应该从父元素继承 page-break-after 属性的设置。
/* 在 .footer 元素后始终插入分页符 */@media print {.footer {page-break-after: always;}
page-break-inside（用于设置是否在指定元素中插入分页符）
auto 默认。如果必要则在元素内部插入分页符。avoid 避免在元素内部插入分页符。inherit 规定应该从父元素继承 page-break-inside 属性的设置。
/* 避免在 <pre> 与 <blockquote> 元素中插入分页符 */@media print {pre, blockquote {page-break-inside: avoid;}}
设置打印布局（横向、纵向、边距）
@media print {@page {/* 纵向 */size: portrait; /* 横向 */size: landscape;/* 边距 上右下左 */margin: 1cm 2cm 1cm 2cm;}}
去除浏览器默认页眉页脚
@media print {@page {margin: 0;}body {margin: 1cm;}}
案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>案例</title><script src="/npm/vue@2.5.16/dist/vue.js"></script></head><style media=print>@page {/* 纵向 */size: portrait;/* 横向 *//*size: landscape;*//* 去除页眉页脚 */margin: 0;}/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */.page {page-break-after: always;}</style><style type="text/css">* {margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-family: serif, Microsoft YaHei;}.print-body {margin: 60px auto;width: 660px;font-size: 14px;/*font-weight: bold;*/color: #000000;}.checkbox-input {cursor: default;margin: auto 10px;width: 14px;height: 14px;border: 1px solid #000000;font-size: 5px;font-weight: bold;}.row {display: flex;}.top-check {margin: 10px 0;}.cell {width: 130px;min-height: 50px;border: #000000 solid 1px;text-align: center;display: flex;align-items: center;justify-content: center;}.cell-input {width: 200px;}.cell-right {border-left: 0px;}.cell-bottom {border-top: 0px;}.cell-end {flex-grow: 1;}.cell-people-num {width: 200px;}.stamp {overflow: hidden;border: #000000 solid 1px;border-top: 0px;height: 150px;width: 100%;}.stamp-cell {overflow: hidden;width: 100%;height: 110px;display: flex;align-items: center;}.stamp-title {width: 220px;height: 30px;line-height: 30px;text-align: center;margin-left: 20px;}.date-cell {width: 650px;height: 40px;line-height: 40px;}.date-item {margin-left: auto;}.date-title {margin-right: 10px;}.date-input {width: 40px;text-align: center;}.cell-num {width: 60px;}.cell-code {width: 140px;}.cell-name {width: 140px;}.cell-address {width: 150px;}.cell-phone {width: 100px;}.cell-key {width: 60px;}.promise {width: 550px;text-align: center;margin: 0 auto;}.cell-remark {min-height: 80px;}.declar-date {margin-top: 20px;margin-left: 100px;}.stamp-info {margin-top: 30px;margin-left: 300px;}.info {margin-top: 10px;}.linkman-name {width: 80px;text-align: center;}.phone {margin-left: 10px;}.telNo {min-width: 100px;text-align: center;}</style><body><div class="html-body-lay" id="app"><div class="print-body page" v-for="(item,index) of infoPage"><div class="row"><div class="cell cell-num">序号</div><div class="cell cell-right cell-code">代码</div><div class="cell cell-right cell-name">名称</div><div class="cell cell-right cell-address">地址</div><div class="cell cell-right cell-phone">联系电话</div><div class="cell cell-right cell-key cell-end">密钥数量</div></div><div class="row" v-for="(info,index) of item"><div class="cell cell-bottom cell-num">{{info.serial}}</div><div class="cell cell-bottom cell-right cell-code">{{info.code}}</div><div class="cell cell-bottom cell-right cell-name">{{info.name}}</div><div class="cell cell-bottom cell-right cell-address">{{info.location}}</div><div class="cell cell-bottom cell-right cell-phone">{{info.telphone}}</div><div class="cell cell-bottom cell-right cell-key cell-end">{{info.keynum}}</div></div><div class="row"><div class="cell cell-remark cell-num cell-bottom">备注</div><div class="cell cell-remark cell-input cell-bottom cell-right cell-end">{{remark}}</div></div><div class="promise">本人承诺上述信息真实有效。</div><div class="stamp-info"><div class="stamp-div">甲方（盖章）：</div><div class="row info"><div class="linkman">联系人：</div><div class="linkman-name">{{partyB}}</div><div class="phone">联系电话：</div><div class="telNo">{{partyTel}}</div></div></div><div class="declar-date">日期：{{date}}</div></div></div></body><script type="text/javascript">var afterPrint = function() {window.close()};window.onafterprint = afterPrint;new Vue({el: '#app',data: {infoPage: [],infoList: [],remark:"备注信息",partyB:"李四",partyTel:"18866667777",date:"=12-12",},computed: {},methods: {initInfo() {var that = thisvar size = 13for (var i = 1; i <= size; i++) {var info = {serial: i, // 序号name: "张三", // 名称code: "123", // 代码location: "啦啦啦啦啦", // 地址telphone: "1778887777", // 联系电话keynum: "100", // 密钥数量}that.infoList.push(info)}console.log(that.infoList)},pageInfo() {var that = thisvar page = Math.ceil(that.infoList.length / 10)for (var i = 0; i < page; i++) {var info = that.infoList.slice(i * 10, 10 + i * 10)that.infoPage.push(info)}console.log(that.infoPage)},print() {console.log("打印");var subOutputRankPrint = document.getElementById('app');console.log(subOutputRankPrint.innerHTML);var newContent = subOutputRankPrint.innerHTML;var oldContent = document.body.innerHTML;document.body.innerHTML = newContent;window.print();},},created() {var that = this},beforeMount() {var that = this},updated() {var that = thisthat.print()},mounted() {var that = thisthat.initInfo()that.pageInfo()},watch: {}})</script></html>
