前端实现附件预览添加水印

最简单

的前端实现预览时添加水印，添加个图层在上方写上水印渲染即可，然后实现穿透顶层元素点击底部元素，实现水印效果，css3属性：pointer-events的妙用
先看效果

<template>
  <div>
    <el-dialog
      modal-append-to-body
      append-to-body
      title="预览"
      :visible.sync="dialogPreviewVisible"
      width="100%"
      close-on-press-escape
      fullscreen
      :before-close="handleClose"
    >
    <!-- 水印图层 -->
      <div class="watermark">
        <span class="watermark-span" v-for="(item, index) in 30" :key="index"
          >张三-xxx部门</span
        >
      </div>
      <!-- 附件预览图层 -->
      <iframe width="100%" name="ifd" src="https://www.chinanews.com.cn/gj/2023/09-05/10072440.shtml" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    iframeUrl: "",
    dialogPreviewVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClose(done) {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
// 水印文案样式
.watermark-span {
  transform: rotate(340deg); //让字体的角度倾斜
  font-size: 18px;
  font-weight: 500;
  padding: 6rem; //水印文案间距调大 
  color: #949494b8;
  user-select: none;
}
// 水印图层样式
.watermark {
  pointer-events: none; //穿透顶层元素点击底部元素，实现水印效果
  overflow: hidden;
  position: absolute;
  background: #ff000000;
  width: 100%;
  display: flex;
  height: 100%;
  // transform: rotate(345deg);
  justify-content: space-between;
  flex-wrap: wrap;
}
 ::v-deep .el-dialog__body {
    flex: 1;
    overflow: auto;
    display: flex;
    position: relative;
    // flex-direction: column;
  }
s iframe {
  height: 100%;
}
</style>