- 一、默認(rèn)打印背景
// css 打印設(shè)置
@media print {
body {
height: auto !important; // 打印必須設(shè)置成auto，否則只會打印第一頁
-webkit-print-color-adjust: exact; // 默認(rèn)打印背景
-moz-print-color-adjust: exact;
-ms-print-color-adjust: exact;
}
@page {
size: 1240px 1754px; // 紙張大小 a4比例
}
}
通過css的樣式設(shè)置，默認(rèn)打印背景；如果涉及到分頁的話body的高度要設(shè)置成
auto，否則可能只會打印第一頁。@page可以任意設(shè)置紙張的大??；
-
二、分頁設(shè)置
page-break-before: 指定元素之前加入分頁符；page-break-after：指定元素之后加入分頁符；可選參數(shù)如下：
page-break-inside:用于設(shè)置是否在指定元素中插入分頁符，參數(shù)如下:
// css
.box {
page-break-after: auto; // box 的后面自動分頁
page-break-inside: avoid; // box 里面禁止分頁
}
-
三、設(shè)置背景圖
時常需要一些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>
-
關(guān)于表格打印的思路
前幾天的需求，我的做法是將數(shù)據(jù)分成每30條一頁，每頁單獨(dú)渲染一個表；如果數(shù)據(jù)太大的話可能影響性能。
// 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>
