javascript 前端 vue css3 window.print() 浏览器打印

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

一、如何设置分页

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

@media print {

div {

page-break-before: always;

}

}

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;

}

三、完整代码

精彩内容

 您阅读本篇文章共花了：