预览加水印

src/main.js

@@ -21,6 +21,8 @@ import Api from './api'
 import Directive from './directives'
 // 自定义过滤器
 import Filter from './filters'
+// 自定义水印指令
+import '@/utils/warterMark'
 // 加密函数
 import JSEncrypt from '../src/assets/js/jsencrypt.min.js';
 

src/utils/date.js

@@ -0,0 +1,34 @@
+/**
+ * 时间格式化
+ * @param value
+ * @param fmt
+ * @returns {*}
+ */
+export function formatDate(value, fmt) {
+	let regPos = /^\d+(\.\d+)?$/
+	if (regPos.test(value)) {
+		//如果是数字
+		let getDate = new Date(value)
+		let o = {
+			'M+': getDate.getMonth() + 1,
+			'd+': getDate.getDate(),
+			'h+': getDate.getHours(),
+			'm+': getDate.getMinutes(),
+			's+': getDate.getSeconds(),
+			'q+': Math.floor((getDate.getMonth() + 3) / 3),
+			'S': getDate.getMilliseconds()
+		}
+		if (/(y+)/.test(fmt)) {
+			fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
+		}
+		for (let k in o) {
+			if (new RegExp('(' + k + ')').test(fmt)) {
+				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+			}
+		}
+		return fmt
+	} else {
+		value = value.trim()
+		return value.substr(0, fmt.length)
+	}
+}

src/utils/warterMark.js

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+
+/**
+ * 使用方式
+ * 1.引入import '@/utils/warterMark'
+ * 2.需要加水印的添加如下命令
+ * v-watermark="{text: '水印名称', textColor: 'rgba(100, 100, 100, 0.6)'}"
+ */
+Vue.directive('watermark', {
+  bind: function(el, binding){
+    // 水印文字，父元素，画布宽度，画布高度，字体，文字颜色，画布横坐标，是否铺满全页
+    function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10', isFull = false){
+      // 检查父元素是否包含子元素
+      const elementContains = (parent, child) => parent !== child && parent.contains(child)
+      const flag = elementContains(parentNode, document.querySelector('canvas'))
+      // 防止重复创建
+      if (!flag) {
+        let can = document.createElement('canvas')
+        parentNode.appendChild(can)
+        can.width = width || 200
+        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.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)
+        }
+      }
+    }
+    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 )
+    }
+  }
+})

src/views/Report/ReportList.vue

@@ -152,7 +152,11 @@
                 <!-- <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>
-                    <div class="preview-content" v-html="content"></div>
+                  <!--  这里用v-if是让水印更新  -->
+                  <div class="preview-content"
+                         v-if="dialogPreview"
+                         v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: true }"
+                         v-html="content"></div>
                 </el-scrollbar>
             </div>
         </el-dialog>
@@ -161,12 +165,14 @@
 
 <script>
 import {downloadFile} from "../../utils/downloadFile";
+import {formatDate} from '@/utils/date'
 
 export default {
     name: "ReportList",
     data() {
         return {
-            fullscreen: false,
+          watermarkText: '', // 水印
+          fullscreen: false,
             q: {
                 keyContent: '',
                 year: [],
@@ -284,6 +290,8 @@ export default {
         // 预览
         previewRow(row) {
             this.fullscreen = false;
+            //  更新预览水印的时间戳
+            this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`;
             this.$api.report.reportGetReportHtmlId({id: row.id}).then(({data}) => {
                 this.content = data.content;
                 this.dialogPreview = true;

src/views/Report/ReportManager.vue

@@ -366,7 +366,11 @@
                 <!-- <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>
-                    <div class="preview-content" v-html="content"></div>
+                    <!--  这里用v-if是让水印更新  -->
+                    <div class="preview-content"
+                         v-if="dialogPreview"
+                         v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: true }"
+                         v-html="content"></div>
                 </el-scrollbar>
             </div>
         </el-dialog>
@@ -376,11 +380,13 @@
 <script>
 import {fileType} from '@/utils/fileType'
 import {downloadFile} from "../../utils/downloadFile";
+import {formatDate} from '@/utils/date'
 
 export default {
     name: "ReportManager",
     data() {
         return {
+            watermarkText: '', // 水印
             fullscreen: false,
             /* =============================================== 操作日志 =============================================== */
             dialogLog: false, // 操作日志
@@ -946,6 +952,8 @@ export default {
         // 预览
         previewRow(row) {
             this.fullscreen = false;
+            //  更新预览水印的时间戳
+            this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`;
             this.$api.report.reportGetReportHtmlId({id: row.id}).then(({data}) => {
                 this.content = data.content;
                 this.dialogPreview = true;