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

最新推荐文章于 2024-08-24 02:09:07 发布

Fatfish_tree

最新推荐文章于 2024-08-24 02:09:07 发布

阅读量883

点赞数

文章标签： javascript 开发语言 ecmascript

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

版权

<!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>