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}},}
}