效果图

建一个watermark.js文件

let watermark = {};
let setWatermark = (text, sourceBody) => {
    // let id = "watermark_fjq_" + parseInt(Math.random() * 100000);
    let id = "watermark_fjq_3.1415926";

    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
    }
    //水印图片
    let can = document.createElement("canvas");
    can.width = 250; // 单个水印大小
    can.height = 120; // 单个水印大小
    let cans = can.getContext("2d");
    cans.rotate((-20 * Math.PI) / 180);
    cans.font = "15px Vedana";
    // cans.fillStyle = "#DCDCDC"; //水印颜色
    cans.fillStyle = "rgba(1, 1, 1, 0.3)";

    
    cans.textAlign = "left";
    cans.textBaseline = "Middle";
    cans.fillText(text, can.width / 20, can.height);
    //设置插入div样式
    let water_div = document.createElement("div");
    water_div.id = id;
    water_div.style.pointerEvents = "none";
    water_div.style.overflow = "hidden";
    water_div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
    if (sourceBody) {
        sourceBody.style.position = "relative";
        water_div.style.width = "100%";
        water_div.style.height = "100%";
        water_div.style.position = "absolute";
        water_div.style.top = "0";
        water_div.style.left = "0";
        sourceBody.appendChild(water_div);
    } else {
        water_div.style.top = "3px";
        water_div.style.left = "0px";
        water_div.style.position = "fixed";
        water_div.style.zIndex = "9999";
        water_div.style.width = document.documentElement.clientWidth + "px";
        water_div.style.height = document.documentElement.clientHeight + "px";
        document.body.appendChild(water_div);
    }
    return id;
};

let removeWatermark = sourceBody => {
    let id = "watermark_fjq_3.1415926";
    sourceBody.removeChild(document.getElementById(id));
};

/**
 *  该方法只允许调用一次
 *  @param:
 *  @text == 水印内容
 *  @sourceBody == 水印添加在哪里，不传就是body
 * */
watermark.set = (text, sourceBody) => {
    setTimeout(() => {
        setWatermark(text, sourceBody);
    }, 1000); //延迟加载
};

watermark.remove = sourceBody => {
    removeWatermark(sourceBody);
};

export default watermark;

页面引入

import watermark from "../../../../libs/utils/watermark";

页面标签声明ref引用

创建时机

• 在页面数据渲染完成后创建(根据具体业务场景而定)

this.$nextTick(() => {
  watermark.set(res.data.data.clashNumber, this.$refs.table);//某个div需要水印, 需要提前给div设置ref属性
});

销毁时机

• 页面关闭时销毁水印(避免重复创建)

watermark.remove(this.$refs.table)

页面完整代码