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

src/main.js

@@ -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';
 

src/utils/waterMark.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") + ")";
-          parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
+
-        } else {
+        // 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
-          // 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
+        let div = document.createElement('div')
-          let div = document.createElement('div')
+        div.id = str
-          div.id = str
+        div.className = 'waterMark'
-          div.style.pointerEvents = 'none'
+        div.style.pointerEvents = 'none'
-          div.style.top = '0'
+        div.style.top = '0'
-          div.style.left = '0'
+        div.style.left = '0'
-          div.style.position = 'absolute'
+        div.style.position = 'absolute'
-          div.style.zIndex = '100000'
+        div.style.zIndex = '100000'
-          div.style.width = '100%'
+        div.style.width = '100%'
-          div.style.height = '100%'
+        div.style.height = '100%'
-          div.style.background = 'url(' + can.toDataURL('image/png') + ')'
+        div.style.background = 'url(' + can.toDataURL('image/png') + ')'
-          parentNode.appendChild(div)
+        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)
     }
   }
 })

src/views/Report/ReportDetail.vue

@@ -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 {
+      .preview-content {
-        margin: 0 14px 0 13px;
+        //margin: 0 14px 0 13px;
         padding-bottom: 11px;
 
         img {
             max-width: 100% !important;
         }
         table{
-            margin: 0 auto;
+          margin: 0 auto;
         }
 
+      }
     }
+
 }
 </style>

src/views/Report/ReportList.vue

@@ -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是让水印更新  -->
-                  <!--  这里用v-if是让水印更新  -->
+                <el-scrollbar
-                  <div class="preview-content"
+                    v-if="dialogPreview"
-                         v-if="dialogPreview"
+                    v-watermark="{ text: watermarkText }">
-                         v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: false }"
+                  <div class="preview-content" v-html="content"></div>
-                         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 {

src/views/Report/ReportManager.vue

@@ -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是让水印更新  -->
-                    <!--  这里用v-if是让水印更新  -->
+                <el-scrollbar
-                    <div class="preview-content"
+                    v-if="dialogPreview"
-                         v-if="dialogPreview"
+                    v-watermark="{ text: watermarkText }">
-                         v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: false }"
+                    <div class="preview-content" v-html="content"></div>
-                         v-html="content"></div>
                 </el-scrollbar>
             </div>
         </el-dialog>