- 一、默认打印背景
// css 打印设置
@media print {
body {
height: auto !important; // 打印必须设置成auto，否则只会打印第一页
-webkit-print-color-adjust: exact; // 默认打印背景
-moz-print-color-adjust: exact;
-ms-print-color-adjust: exact;
}
@page {
size: 1240px 1754px; // 纸张大小 a4比例
}
}
通过css的样式设置，默认打印背景；如果涉及到分页的话body的高度要设置成
auto，否则可能只会打印第一页。@page可以任意设置纸张的大小；
-
二、分页设置
page-break-before: 指定元素之前加入分页符；page-break-after：指定元素之后加入分页符；可选参数如下：
page-break-inside:用于设置是否在指定元素中插入分页符，参数如下:
// css
.box {
page-break-after: auto; // box 的后面自动分页
page-break-inside: avoid; // box 里面禁止分页
}
-
三、设置背景图
时常需要一些logo之类的加在页头或者页脚，可以利用定位的方式去处理；
<!DOCTYPE html>
<head>
<style>
.body{
height: auto !important;
-webkit-print-color-adjust: exact;
-moz-print-color-adjust: exact;
-ms-print-color-adjust: exact;
}
.background {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background-image: url('./img/print-bg.png');
background-position: center center;
background-repeat: no-repeat;
display: none;
}
.content {
padding: 600px 0;
text-align: center;
font-size: 50px;
color: red;
}
@media print {
.background {
display: block;
}
}
</style>
</head>
<body>
<div class="background"></div>
<div class="main">
<div class="content">
第1部分
</div>
<div class="content">
第2部分
</div>
<div class="content">
第3部分
</div>
<div class="content">
第4部分
</div>
</div>
</body>
-
关于表格打印的思路
前几天的需求，我的做法是将数据分成每30条一页，每页单独渲染一个表；如果数据太大的话可能影响性能。
// jsx react + antd
<div>
{ tableDatas.length > 0 && Array.from({length: Math.ceil(tableDatas.length / 30)}).map((item, index) => {
return <div className='printContent'>
<Table
dataSource={tableDatas.filter((i, eIndex) => eIndex >= index * 30 && eIndex < (index + 1) * 30)}
columns={[]}
pagination={false}
/>
</div>
})
}
</div>
