当前位置：首页 > VUE

vue页面实现水印

2026-01-19 07:42:53VUE

实现Vue页面水印的方法

使用CSS背景图实现水印

在Vue组件中通过CSS添加重复水印背景，适合静态水印。

<template>
  <div class="watermark-container">
    <!-- 页面内容 -->
  </div>
</template>

<style>
.watermark-container {
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"><text x="10" y="50" font-family="Arial" font-size="20" fill="rgba(0,0,0,0.1)" transform="rotate(-30)">CONFIDENTIAL</text></svg>');
  background-repeat: repeat;
  min-height: 100vh;
}
</style>

使用Canvas动态生成水印

通过Canvas绘制水印并转为背景图，可动态修改水印内容。

<template>
  <div ref="watermarkContainer" class="content">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.generateWatermark();
  },
  methods: {
    generateWatermark() {
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 100;
      const ctx = canvas.getContext('2d');

      ctx.font = '16px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.rotate(-Math.PI / 6);
      ctx.fillText('Watermark Text', 10, 50);

      this.$refs.watermarkContainer.style.backgroundImage = 
        `url(${canvas.toDataURL()})`;
      this.$refs.watermarkContainer.style.backgroundRepeat = 'repeat';
    }
  }
};
</script>

使用第三方库vue-watermark

对于需要更复杂功能的场景，可以使用专门的水印库。

安装依赖：

npm install vue-watermark

使用示例：

<template>
  <vue-watermark
    :text="watermarkText"
    :font="watermarkFont"
    :width="200"
    :height="100"
    :opacity="0.1"
    :rotate="-30"
  >
    <!-- 页面内容 -->
  </vue-watermark>
</template>

<script>
import VueWatermark from 'vue-watermark';

export default {
  components: { VueWatermark },
  data() {
    return {
      watermarkText: 'CONFIDENTIAL',
      watermarkFont: '16px Arial'
    };
  }
};
</script>

防止水印被删除的保护措施

添加MutationObserver监听DOM变化，防止水印被移除。

protectWatermark() {
  const targetNode = this.$refs.watermarkContainer;
  const config = { attributes: true, childList: true, subtree: true };

  const callback = (mutationsList) => {
    for(const mutation of mutationsList) {
      if(mutation.type === 'childList') {
        this.generateWatermark();
      }
    }
  };

  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
}

响应式水印调整

监听窗口大小变化，调整水印密度。

window.addEventListener('resize', this.debounce(() => {
  this.generateWatermark();
}, 200));

debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

vue页面实现水印