预览加水印

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;