vue界面增加自定义水印 js

vue整个界面增加自定义水印

需求：领导想要增加自定义水印
好不容易调完，还是想记录一下,在.vue界面编写

export default {

 mounted() {
    this.$nextTick(() => {
      this.addWatermark()
    })
    },
   methods: {
   // 关键：添加水印
    // 动态添加水印
    addWatermark() {
    // 这是登录的时候保存在硬盘里的数据
      const bidataLoginUserinfo = JSON.parse(localStorage.getItem('bidata__Login_Userinfo'))
      return new Promise((resolve) => {
        const watermark = document.createElement('div')
        watermark.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            font-size: 24px,
            z-index: 9999;
            background-repeat: repeat; 
            background-size: 50% auto;   /* 每行两个，每两行重复一次 */
            /* 关键调整：通过 background-size 控制间距 */
          `

        // 增大 SVG 尺寸并添加 viewBox
        const svgMark = `
      ${bidataLoginUserinfo.value.realname} ${new Date().toLocaleDateString()}
        
      
    `

        watermark.style.backgroundImage = `url("data:image/svg+xml;utf8,${encodeURIComponent(svgMark)}")`

        const contentEl = this.$refs.html2Pdf.$el.querySelector('.pdf-content')
        if (contentEl) {
          contentEl.style.position = 'relative'
          contentEl.appendChild(watermark)
          this.watermarkElement = watermark
        }

        resolve()
      })
    },
    // 这是去掉水印的代码
    removeWatermark() {
      if (this.watermarkElement) {
        this.watermarkElement.remove()
        this.watermarkElement = null
      }
    },
   }
}