js打印通过CSS增加水印

发布于 2023-07-04  347 次阅读

通过@media print设置打印样式

1.页面style

/* 打印样式 */
        @media print {
            body::after {
                content: "水印文字";
                opacity: 0.5;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
                font-size: 72px;
                color: lightgray;
                pointer-events: none;
                z-index: 9999;
            }
        }

2.样式引用

<link href="print.css" media="print">

代码实例

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 打印样式 */
        @media print {
            body::after {
                content: "水印文字";
                opacity: 0.5;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
                font-size: 72px;
                color: lightgray;
                pointer-events: none;
                z-index: 9999;
            }
            /*设置打印页面大小 - 按需使用*/
            @page {
                size:  21cm 29.7cm;
                margin: 0;
                padding: 0;
            }
            /*无需打印区域 - 按需使用*/
            .noprint {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1>这是一个打印示例</h1>
    <p>这是要打印的内容。</p>

    <button onclick="printPage()">打印</button>

    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>