优化水印显示（减少对展示内容的影响）

2022-11-15 11:44:37 +08:00
parent 31b00d5cae
commit c27a4674eb
5 changed files with 49 additions and 39 deletions
@@ -22,7 +22,7 @@ import Directive from './directives'
 // 自定义过滤器
 import Filter from './filters'
 // 自定义水印指令
-import '@/utils/warterMark'
+import '@/utils/waterMark'
 // 加密函数
 import JSEncrypt from '../src/assets/js/jsencrypt.min.js';

@@ -9,7 +9,7 @@ import Vue from 'vue'
 Vue.directive('watermark', {
  bind: function(el, binding){
    // 水印文字，父元素，画布宽度，画布高度，字体，文字颜色，画布横坐标，是否铺满全页
-    function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10', isFull = false){
+    function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10'){
      // 检查父元素是否包含子元素
      const elementContains = (parent, child) => parent !== child && parent.contains(child)
      const flag = elementContains(parentNode, document.querySelector('canvas'))
@@ -17,37 +17,36 @@ Vue.directive('watermark', {
      if (!flag) {
        let can = document.createElement('canvas')
        parentNode.appendChild(can)
-        can.width = width || 200
+        can.width = width || 300
        can.height = height || 140
        can.style.display = 'none'
        let cans = can.getContext('2d')
        cans.rotate(-20 * Math.PI / 180)
        cans.font = font || '13px Microsoft Yahei'
-        cans.fillStyle = textColor || '#DDDDDD'
+        cans.fillStyle = textColor || 'rgba(100, 100, 100, 0.2)'
        cans.textAlign = 'left'
        cans.textBaseline = 'Middle'
        cans.fillText(str, fillTextX, can.height)
        // 设置背景图（整个项目中都添加水印建议使用此方法）
-        if(isFull) {
-          parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
-        } else {
-          // 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
-          let div = document.createElement('div')
-          div.id = str
-          div.style.pointerEvents = 'none'
-          div.style.top = '0'
-          div.style.left = '0'
-          div.style.position = 'absolute'
-          div.style.zIndex = '100000'
-          div.style.width = '100%'
-          div.style.height = '100%'
-          div.style.background = 'url(' + can.toDataURL('image/png') + ')'
-          parentNode.appendChild(div)
-        }
+        // parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
+
+        // 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
+        let div = document.createElement('div')
+        div.id = str
+        div.className = 'waterMark'
+        div.style.pointerEvents = 'none'
+        div.style.top = '0'
+        div.style.left = '0'
+        div.style.position = 'absolute'
+        div.style.zIndex = '100000'
+        div.style.width = '100%'
+        div.style.height = '100%'
+        div.style.background = 'url(' + can.toDataURL('image/png') + ')'
+        parentNode.appendChild(div)
      }
    }
    if (binding.value.text) {
-      addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX, binding.value.isFull )
+      addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX)
    }
  }
 })
@@ -25,18 +25,22 @@
            <span>报告详情</span>
            <el-button type="primary" @click="downloadRow(row)">报告下载</el-button>
        </div>
+      <div class="preview-box" v-watermark="{ text: watermarkText }">
        <div class="preview-content" v-html="content"></div>
+      </div>
    </div>
 </template>

 <script>
-import {downloadFile} from "../../utils/downloadFile";
+import {downloadFile} from "@/utils/downloadFile";
+import {formatDate} from '@/utils/date'

 export default {
    name: "ReportDetail",
    data(){
        return {
-            content: '',
+          watermarkText: '', // 水印
+          content: '',
            row: {},
        }
    },
@@ -47,6 +51,7 @@ export default {
                this.$router.push({path: '/report/list', query: {id: this.$route.query.id}});
                return
            }
+            this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`;
            this.row = JSON.parse(this.$route.query.row);
            this.$api.report.reportGetReportHtmlId({id: this.row.id}).then(({data}) => {
                this.content = data.content;
@@ -137,18 +142,26 @@ export default {
            color: #262626;
        }
    }
+    .preview-box {
+      // 定位使水印不溢出元素
+      position: relative;
+      // 居中
+      width: calc(100% - 13px - 14px);
+      margin-left: 13px;

-    .preview-content {
-        margin: 0 14px 0 13px;
+      .preview-content {
+        //margin: 0 14px 0 13px;
        padding-bottom: 11px;

        img {
            max-width: 100% !important;
        }
        table{
-            margin: 0 auto;
+          margin: 0 auto;
        }

+      }
    }
+
 }
 </style>
@@ -151,12 +151,11 @@
            <div class="preview-dialog-body" :class="{'active': fullscreen}">
                <!-- <img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
                <img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen"> -->
-                <el-scrollbar>
-                  <!--  这里用v-if是让水印更新  -->
-                  <div class="preview-content"
-                         v-if="dialogPreview"
-                         v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: false }"
-                         v-html="content"></div>
+                <!--  这里用v-if是让水印更新  -->
+                <el-scrollbar
+                    v-if="dialogPreview"
+                    v-watermark="{ text: watermarkText }">
+                  <div class="preview-content" v-html="content"></div>
                </el-scrollbar>
            </div>
        </el-dialog>
@@ -164,7 +163,7 @@
 </template>

 <script>
-import {downloadFile} from "../../utils/downloadFile";
+import {downloadFile} from "@/utils/downloadFile";
 import {formatDate} from '@/utils/date'

 export default {
@@ -365,12 +365,11 @@
            <div class="preview-dialog-body" :class="{'active': fullscreen}">
                <!-- <img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
                <img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen"> -->
-                <el-scrollbar>
-                    <!--  这里用v-if是让水印更新  -->
-                    <div class="preview-content"
-                         v-if="dialogPreview"
-                         v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: false }"
-                         v-html="content"></div>
+                <!--  这里用v-if是让水印更新  -->
+                <el-scrollbar
+                    v-if="dialogPreview"
+                    v-watermark="{ text: watermarkText }">
+                    <div class="preview-content" v-html="content"></div>
                </el-scrollbar>
            </div>
        </el-dialog>