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 尺寸并添加 viewBoxconst svgMark = `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400"viewBox="0 0 400 400"><text x="50%" y="50%" font-size="24px" fill="rgb(205 191 191 / 0.2)" transform="rotate(-45, 200, 200)"text-anchor="middle"dominant-baseline="middle"font-family="Arial">${bidataLoginUserinfo.value.realname} ${new Date().toLocaleDateString()}</text></svg>`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}},}
}