实现水印

由于项目版本的问题，无法使用NG-ZORRO的水印组件
实现是完全照搬这篇文章：angular 页面水印功能实现

照搬博客代码实现

在app.component.html中添加代码（任意位置）

<div style="position: fixed;top: 0;left: 0;">
  <div *ngFor="let item of watermarkList" class="watermarkList">
    <div [ngStyle]="item.objStyle">
      {{item.txt}}
    </div>
  </div>
</div>

在app.component.ts中添加代码
先添加一个函数

/**
   * Generate a watermark based on the provided settings.
   * @param {Object} settings - The configuration settings for the watermark.
   * @returns {Array} - The generated watermark elements.
   */
  watermark(settings) {
    // Define default settings
    let defaultSettings = {
      watermark_txt: "text",
      watermark_x: 20, // x-axis coordinate of watermark start position
      watermark_y: 20, // y-axis coordinate of watermark start position
      watermark_rows: 20, // number of watermark rows
      watermark_cols: 20, // number of watermark columns
      watermark_x_space: 150, // x-axis spacing between watermarks
      watermark_y_space: 100, // y-axis spacing between watermarks
      watermark_color: '#000000', // watermark font color
      watermark_alpha: 0.15, // watermark transparency
      watermark_fontsize: '18px', // watermark font size
      watermark_font: '微软雅黑', // watermark font
      watermark_width: 300, // watermark width
      watermark_height: 100, // watermark height
      watermark_angle: 15, // watermark tilt angle
    };

    // Replace default settings with provided settings
    if (arguments.length === 1 && typeof arguments[0] === "object") {
      var src = arguments[0] || {};
      for (let key in src) {
        if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
          continue;
        else if (src[key])
          defaultSettings[key] = src[key];
      }
    }

    var resList = [];
    var page_width = document.body.offsetWidth;
    var page_height = document.body.offsetHeight;

    // Calculate watermark columns and x-axis spacing if they exceed page width
    if (defaultSettings.watermark_cols === 0 || (defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1) > page_width)) {
      defaultSettings.watermark_cols = (page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space);
      defaultSettings.watermark_x_space = (page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1);
    }

    // Calculate watermark rows and y-axis spacing if they exceed page height
    if (defaultSettings.watermark_rows == 0 ||
      (defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height) {
      defaultSettings.watermark_rows = (defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space);
      defaultSettings.watermark_y_space = (page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1);
    }

    var x;
    var y;
    for (var i = 0; i < defaultSettings.watermark_rows; i++) {
      y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
      for (var j = 0; j < defaultSettings.watermark_cols; j++) {
        x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
        var mask_div = {
          style: "",
          txt: "",
        };

        mask_div.txt = defaultSettings.watermark_txt;
        // Set watermark div tilt display
        mask_div.style = JSON.stringify({
          'pointer-events': 'none',
          '-webkit-transform': 'rotate(-' + defaultSettings.watermark_angle + 'deg)',
          '-moz-transform': 'rotate(-' + defaultSettings.watermark_angle + 'deg)',
          '-ms-transform': 'rotate(-' + defaultSettings.watermark_angle + 'deg)',
          '-o-transform': 'rotate(-' + defaultSettings.watermark_angle + 'deg)',
          'transform': 'rotate(-' + defaultSettings.watermark_angle + 'deg)',
          'position': 'absolute',
          'left': x + 'px',
          'top': y + 'px',
          'overflow': 'hidden',
          'z-index': '99999',
          'opacity': defaultSettings.watermark_alpha,
          'font-size': defaultSettings.watermark_fontsize,
          'font-family': defaultSettings.watermark_font,
          'color': defaultSettings.watermark_color,
          'text-align': 'center',
          'width': defaultSettings.watermark_width + 'px',
          'height': defaultSettings.watermark_height + 'px',
          'display': 'block',
        });

        resList = resList.concat(mask_div);
      }
    }
    return resList;
  }

在构造函数中添加

// Set a timeout to start the logic after 1 second
    setTimeout(() => {
      // Set an interval to repeat the logic every 1 second
      setInterval(() => {
        // Define the text and font size for the watermark
        let text1 = { watermark_txt: '在此处修改水印文字', watermark_fontsize: '16px' };

        // Generate the watermark list by calling the watermark function with the text
        this.watermarkList = this.watermark(text1);

        // Iterate over each item in the watermark list
        for (let item of this.watermarkList) {
          // Parse the style property from a JSON string to a JSON object
          let style = JSON.parse(item.style);
          // Assign the parsed style object to the objStyle property
          // This is done because ngStyle only supports objects
          item.objStyle = style;
        }
      }, 1000);
    }, 1000);

注：可以在style中通过设置z-index: 999;让水印永远在最上方

在指定页面隐藏水印

因为这个方法在系统中是给所有页面添加水印，例如一些需要打印的页面就需要隐藏水印了
那么我在指定页面隐藏水印的方法是通过侦测路由

侦测路由

依旧是在app.component.ts中的构造函数中添加

注意请自行添加字段声明

// Subscribe to router events
    router.events.subscribe(e => {
      // Check if the event has a URL
      if (e['url']) {
        // Update the routeUrl property
        this.routeUrl = e['url'];
      }
    });

用if判断是因为侦测事件中有很多项，不是每个都有url字段，不判断的话会导致routeUrl字段为undefined 设置

判断是否隐藏

在水印的html代码中添加一个ngif设置隐藏

<div style="position: fixed;top: 0;left: 0;z-index: 999;" *ngIf="isShowWatermark()">
  <div *ngFor="let item of watermarkList" class="watermarkList">
    <div [ngStyle]="item.objStyle">
      {{item.txt}}
    </div>
  </div>
</div>

编写函数isShowWatermark()

/**
   * Checks if the watermark should be shown based on the current route URL.
   * @returns True if the watermark should be shown, false otherwise.
   */
  isShowWatermark(): boolean {
    // Initialize the result to true
    let result = true;

    // Iterate over each index in the watermarkData array
    this.watermarkData.some(index => {
      // Check if the route URL includes the current index
      if (this.routeUrl.includes(index)) {
        // If it does, set the result to false and return true to break the loop
        result = false;
        return true;
      }
    });
    // Return the final result
    return result;
  }

其中watermarkData数组为需要隐藏页面的路由，例如我的是：

watermarkData = [
    '/apps/planmanage/purchase-order-list/print',
    '/apps/planmanage/label-manage/label-print',
    '/apps/supplier/receipt-print',
    ……
  ];

注：如果watermarkData数组中的路由不需要通过url传参（也就是/:id)，isShowWatermark()函数可以写成更简洁的形式：

isShowWatermark(): boolean {
     return !this.watermarkData.includes(this.routeUrl);
  }