媒体查询指定打印的样式
@media print{
body{
color: white;
}
}
换页
page-break-after
// 设置元素后的分页行为
page-break-after: always;
auto 默认。如果必要则在元素后插入分页符。
always 在元素后插入分页符。
avoid 避免在元素后插入分页符。
left 在元素之后足够的分页符，一直到一张空白的左页为止。
right 在元素之后足够的分页符，一直到一张空白的右页为止。
inherit 规定应该从父元素继承 page-break-after 属性的设置。
// 设置元素前的分页行为
page-break-befor: always;
auto 默认值。如果必要则在元素前插入分页符。
always 在元素前插入分页符。
avoid 避免在元素前插入分页符。
left 在元素之前足够的分页符，一直到一张空白的左页为止。
right 在元素之前足够的分页符，一直到一张空白的右页为止。
inherit 规定应该从父元素继承 page-break-before 属性的设置。
// 设置元素内的分页行为
page-break-inside: avoid;
auto 默认。如果必要则在元素内部插入分页符。
avoid 避免在元素内部插入分页符。
inherit 规定应该从父元素继承 page-break-inside 属性的设置。
设置打印文档样式
@page
// 设置打印页面纸张的边距和方向
@media print {
@page {
size: A4 portrait; // 纵向
margin: 10mm 10mm;
}
}
@page 规则用于在打印文档时修改某些CSS属性。
你不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of +the document。
对其他属性的修改是无效的。
size 指定页面盒模型所在的容器的大小和方向
auto：使用浏览器打印默认纸张的尺寸和方向
landscape：内容横向展示
portrait：内容纵向展示（默认）
<length>：第一个值对应于页面框的宽度，第二个值对应于页面框的高度。如果只提供了一个值，则它同时用于宽度和高度。
<page-size>：给定纸张尺寸，如A5，A4，A3
marks 向文档添加剪切标记和/或注册标记。
crop：显示裁剪标记
cross：将显示十字标记
none：不显示任何标记
打印伪类
:first 打印文档的时候，第一页的样式
// 第一页的文字会在中间显示， 其他页的内容在默认位置显示
@page :first {
margin-left: 50%;
margin-top: 50%;
}
:left，:right 对打印文档的左/右侧页设置CSS样式
并不是所有样式属性都能应用在此选择器内.
仅仅 margin, padding, border, 和 background 等打印时需要的属性可以使用. 其他属性将直接忽略, 并且可以使用的属性也只会在打印时生效, 显示时不会生效.
单位
对mm(毫米),cm(厘米),in(英寸)单位都是很常用的
// 纸张尺寸
A5：148mm x 210mm.
A4：210mm x 297mm
A3: 297mm x 420mm.
B5: 176mm x 250mm.
B4: 250mm x 353mm.
JIS-B5: 182mm x 257mm.
JIS-B4: 257mm x 364mm.
letter： 8.5in x 11in.
legal：8.5in x 14in.
ledger：11in x 17in.
// in与mm转换
1 in = 25.4 mm
1 mm = 0.03937 in
单位转换
/**
* 单位转换
* @returns {
{px2cm(*): *, cm2px(*): number, mm2px(*): number, pX2mm(*): number}|number}
*/
export const changeUnit = ()=> {
let ratio = 0;
let div = document.createElement("div");
div.style.width = '1cm';
div.id = "puc";
document.body.appendChild(div);
let w = getComputedStyle(div, null).width;
ratio = w.substr(0, w.length - 2);
div.parentNode.removeChild(div);
return {
px2cm (px) {
return Math.round(px * 10 / ratio) / 10;
},
pX2mm (px) {
let r = ratio / 10;
return Math.round(px / r);
},
cm2px (cm) {
return Math.round(cm * ratio);
},
mm2px (mm) {
let r = ratio / 10;
return Math.round(mm * r);
}
}
}