效果圖

建一個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)

頁面完整代碼

<template>
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancelHandler" :visible.sync="isShow"
        width="40%">
        <div class="container" ref="table">
            <div class="info">
                <el-row class="title-row">
                    <div>{{dataInfo.title}}</div>
                </el-row>

                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>卷号</div>
                    </el-col>
                    <el-col class="common-col" :span="18">
                        <div>{{ dataInfo.clashNumber }}</div>
                    </el-col>

                </el-row>
                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>村莊</div>
                    </el-col>
                    <el-col class="common-col" :span="18">
                        <div>{{ dataInfo .villageName}}</div>
                    </el-col>

                </el-row>

                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>申請人姓名</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>{{ dataInfo.submitter }}</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>聯系方式</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>{{ dataInfo.submitterPhone }}</div>
                    </el-col>
                </el-row>
                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>調解員</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>{{ dataInfo.mediator }}</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>聯系方式</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>{{ dataInfo.mediatorPhone }}</div>
                    </el-col>
                </el-row>
                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>法律顧問</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>{{ dataInfo.lawyer }}</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>聯系方式</div>
                    </el-col>
                    <el-col class="common-col" :span="6">
                        <div>{{ dataInfo.lawyerPhone }}</div>
                    </el-col>
                </el-row>
                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>糾紛類型</div>
                    </el-col>
                    <el-col class="common-col" :span="18">
                        <div>{{ dataInfo.typeName }}</div>
                    </el-col>

                </el-row>
                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>糾紛事由</div>
                    </el-col>
                    <el-col class="common-col" :span="18">
                        <div>{{ dataInfo.clashInfo }}</div>
                    </el-col>

                </el-row>
                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>受理日期</div>
                    </el-col>
                    <el-col class="common-col" :span="18">
                        <div>{{ dataInfo.startTime }}</div>
                    </el-col>

                </el-row>
                <el-row class="common-row">
                    <el-col class="common-col" :span="6">
                        <div>辦結日期</div>
                    </el-col>
                    <el-col class="common-col" :span="18">
                        <div>{{ dataInfo.endTime }}</div>
                    </el-col>

                </el-row>
                <el-row class="common-row">
                    <el-col class="ercode-col" :span="24">
                        <div>
                            <VueQr :text="qrcode" :size="250"> </VueQr>
                        </div>
                    </el-col>
                </el-row>

            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancelHandler">取消</el-button>
            <el-button :loading="loading" type="primary" icon="el-icon-printer" @click="printHandler">列印</el-button>
        </div>
    </el-dialog>
</template>

<script>
import VueQr from "vue-qr";
import watermark from "../../../../libs/utils/watermark";
export default {
    components: { VueQr },
    //this.qrcode = `http://jabberwocky.natapp1.cc/api/sange/qrCode/chash?clashId=${id}`;
    computed: {
        qrcode() {
            return `http://jabberwocky.natapp1.cc/api/sange/qrCode/chash?clashId=${this.dataForm.id}`;
        }
    },
    data() {
        return {
            loading: false,
            action: "",
            dataForm: {
                id: "",
                title: "山東省冠縣",
                villageName: "白佛頭村",
                name: "人民調解案宗"
            },
            dataInfo: {},
        
            isShow: false
        };
    },
    methods: {
        init(id) {
            this.dataForm.id = id;
            this.isShow = true;
            this.loadData();
        },
        loadData() {
            this.$api.clashGenArchive(this.dataForm.id).then(res => {
                console.log("clashGenArchive ", res);
                this.dataInfo = res.data.data;
                this.$nextTick(() => {
                    watermark.set(res.data.data.clashNumber, this.$refs.table);//某個div需要水印, 需要提前給div設定ref屬性
                });
            });
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0 || rowIndex === 9) {
                if (columnIndex === 0) {
                    return [1, 2];
                } else if (columnIndex === 1) {
                    return [0, 0];
                }
            }
        },
        cancelHandler() {
            watermark.remove(this.$refs.table)

            this.$emit("finish");
            this.isShow = false;
            this.resetForm();
        },
        printHandler() {
            this.$print(this.$refs.table);
        },
        resetForm() {
            this.dataList = {};
        }
    }
};
</script>

<style scoped>
.info {
    text-align: center;
    height: 1048px;
    width: 720px;
    /* background: url("../../../../../src/assets/bj.png") no-repeat;
    background-size: cover; */
}

.container {
    display: flex;
    align-items: center;

}

.title-row {
    border: 1px solid black;
    font-size: xx-large;
    font-weight: bold;
}

.common-row {}

.common-col {
    border: 1px solid black;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.ercode-col {
    border: 1px solid black;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.common-col div {
    /* margin-top: 15px; */
    font-weight: bold;
}
</style>

vue實作頁面div添加水印

效果圖

建一個watermark.js檔案

頁面引入

頁面标簽聲明ref引用

建立時機

銷毀時機

頁面完整代碼

繼續閱讀

怎樣在頭條給自己的作品中的圖檔添加水印，方法超簡單

🧡app：掃描全能王我要把這個寶藏神器推薦給所有教師、學生、家長！太香了～1️⃣提取文字、表格、word平常在網上看到好

openOffice實作word轉pdf和添加水印

PHP給圖檔添加水印demo下載下傳、包含其他的一些處理圖檔的類：上傳、縮略圖、檢查是否合法等

我應該不是最後一個知道怎麼給頭條圖檔加水印的吧！第一步點選我的第二步點選設定第三步打開作品配圖自動添加水印（這是在今日頭

小米相冊8個實用隐藏功能1.一鍵消除路人（圖2）2.AI一鍵換天（圖3）3.照片生成證件照（圖4）4.一鍵添加水印（圖5

新手如何給自己的圖檔添加水印？

給圖檔添加水印的幾個簡單方法

怎樣給圖檔添加水印？這幾種方法很簡單

PDF怎麼添加水印？高效工具說明

[禮物]終于知道如何給自己的頭條圖檔自動添加水印了，超級簡單的就三步，1.打開今日頭條APP，找到首頁界面左下角點選我的

怎樣在視訊上添加水印，教你4個水印添加方法

給圖檔添加水印的最簡單方法

從另外一個入口釋出視訊，每天也能賺取三五百元的收入。你知道嗎？即使在手機上更換視訊釋出入口，每天也能通過視訊流量獲得收益

衆荷喧嘩攝影後期練習添加水印

賽效：檔鋪辦公工具如何給Word文檔添加水印？