html/js 打印时，添加水印

rdsgf

已于 2023-08-15 17:21:11 修改

阅读量1.3k

点赞数 4

文章标签： javascript html 前端

于 2023-08-15 17:15:19 首次发布

本文链接：https://blog.csdn.net/rdsgf/article/details/132303116

版权

先看效果图：

以上效果使用浏览器自带的打印功能，无需写别的水印代码。

若以上效果能够满足你的需求，那请拿走吧。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .watermark {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.5;
      font-size: 22px;
      color: lightgrey;
      z-index: -1;
      font-family: '方正姚体';
      overflow: hidden;
      transform: rotate(-45deg); 
      transform-origin: 0 0; 
    }

    @media print {
      .watermark {
        display: block; 
      }
    }
  </style>
</head>
<body>
  <button id="dayin" onclick="printsMark()">打印</button>
  <h1>rdsgf:  打印测试</h1>
  <p>这是一些要打印的内容。</p>

  <script>
    function addWatermarks() {
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      console.log(screenWidth + " " + screenHeight)
      var watermarkWidth = 200;
      var watermarkHeight = 200; //可设置，看效果
      var rows = Math.ceil(screenHeight / watermarkHeight);
      var cols = Math.ceil(screenWidth / watermarkWidth);
      console.log(rows + " " + cols)
      var container = document.createElement('div');
      container.className = 'watermark-container';
      document.body.appendChild(container);

      //铺满整个屏幕
      // for (var i = 0; i < rows; i++) {
      //   for (var j = 0; j < cols; j++) {
      //     var watermark = document.createElement('div');
      //     watermark.className = 'watermark';
      //     watermark.innerText = '凭栏倚,吞云烟；半入清风半入喉；清风也染人间愁';
      //     watermark.style.top = i * watermarkHeight + 'px';
      //     watermark.style.left = j * watermarkWidth + 'px';
      //     container.appendChild(watermark);
      //   }
      // }

      //只添加一个水印
      for (var i = 0; i < 1; i++) {
        var watermark = document.createElement('div');i
        watermark.className = 'watermark';
        watermark.innerText = '凭栏倚,吞云烟；半入清风半入喉；清风也染人间愁';
        watermark.style.top = watermarkHeight * 3 + 'px';
        watermark.style.left = watermarkWidth + 'px';
        container.appendChild(watermark);
      }

    }

	function printsMark() {
		document.getElementById('dayin').style.display = 'none';
        addWatermarks();
	    window.print();
		document.getElementById('dayin').style.display = 'block';
	}


  </script>
</body>
</html>