先去官網(wǎng)下載 printJs 文件
https://codeleading.com/article/82084960757/#google_vignette // window.print()原生 打印背景色失效問題
https://printjs.crabbly.com/ // 官網(wǎng)文檔
https://blog.csdn.net/weixin_39602178/article/details/133761418 // 字體大小無效問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.header-wrap,
.body-wrap {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-wrap li,
.body-wrap li {
width: 100px;
/* border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc; */
text-align: center;
}
.header-wrap {
background-color: rgba(99, 110, 122);
color: #fff;
}
.body-wrap:nth-child(odd) {
background-color: rgb(239, 239, 239);
}
.body-wrap {
font-size: 16px;
padding: 2px;
}
.content-wrap {
width: 300px;
margin: 0 auto;
}
</style>
<style type="text/css" media="print,screen">
div {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
color-adjust: exact;
}
</style>
<body>
<div style="display: none;">
<div class="content-wrap" id="printHtml">
<ul class="header-wrap">
<li class="header">序號</li>
<li class="header">商品名稱</li>
<li class="header">價格</li>
<li class="header">數(shù)量</li>
</ul>
<ul class="body-wrap">
<li class="header">1</li>
<li class="header">蘋果</li>
<li class="header">12</li>
<li class="header">5</li>
</ul>
<ul class="body-wrap">
<li class="header">2</li>
<li class="header">香蕉</li>
<li class="header">9</li>
<li class="header">4</li>
</ul>
<ul class="body-wrap">
<li class="header">3</li>
<li class="header">橘子</li>
<li class="header">13</li>
<li class="header">7</li>
</ul>
<ul class="body-wrap">
<li class="header">4</li>
<li class="header">火龍果</li>
<li class="header">16</li>
<li class="header">1</li>
</ul>
</div>
</div>
</body>
</html>
<script src="./print.js"></script>
<script>
setTimeout(() => {
printJS({
printable: "printHtml",
type: "html",
targetStyles: '*',
// 默認(rèn)800，設(shè)置1000是因?yàn)槲掖翱趯挾仁?000咧栗，而導(dǎo)致頁面靠近左邊逆甜，設(shè)置1000就正常居中了。
})
}, 1000);
</script>
