使用print.js修改打印部分样式的使用_js打印样式修改-CSDN博客

本文链接：https://blog.csdn.net/fatfish_tree/article/details/134124861

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 οnclick="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>