使用print.js修改打印部分样式的使用

最新推荐文章于 2025-09-22 11:00:04 发布

原创最新推荐文章于 2025-09-22 11:00:04 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

文章介绍了如何使用HTML、CSS和JavaScript（PrintJS库）在网页上实现打印功能，包括自定义样式和媒体打印选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <p>test print</p>
    <div class="print-div" id="print_area">
        <p class="red">世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
        <p class="green">世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
        <p>世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
        <p>世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
    </div>
    <button onclick="printSomething()">打印</button>
</div>

</body>
</html>

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">

<script>
    function printSomething() {
        const style = '@page {  } ' +'@media print { .print-div{ padding:8px;background-color:#cccccc;line-height:12px } .red{ color:#f00} .green{color:green}' ;
        new printJS({
            printable: 'print_area',
            type: 'html',
            style: style,// 亦可使用引入的外部css;
            scanStyles: false
        });
    }

</script>