报告增加水印

src/hooks/waterMark.js

@@ -0,0 +1,25 @@
+/**
+ * 添加水印钩子
+ * @param text  水印文本
+ * @param target    要设置水印的元素
+ */
+
+
+export function useWaterMark(text,target) {
+    if(!target) return
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = "18px Arial";
+    ctx.rotate((-45 * Math.PI) / 200);
+    ctx.fillStyle='#F1F1F1'
+    ctx.fillText(text, 30, 200);
+    ctx.fillText(text, -40, 100);
+
+    // 将canvas的内容转换为base64编码
+    const data = canvas.toDataURL("image/png");
+
+    console.log('水印背景图',data);
+
+    // 将容器的的背景图片设置为生成的base64图片,并平铺
+    target.value.style.background = "url(" + data + ") repeat";
+}

src/views/report/ChapterDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref,onMounted,computed} from 'vue'
+import {ref,onMounted,computed,nextTick} from 'vue'
 import {
     apiChapterDetail,
     apiChapterTickerValue,
@@ -18,11 +18,14 @@ import Comment from '@/components/Comment.vue'
 import preLoadImg from '@/utils/preLoadImg.js'
 import { useRoute,onBeforeRouteUpdate,useRouter } from 'vue-router';
 import { useStore } from 'vuex'
+import {useWaterMark} from '@/hooks/waterMark.js'
 
 const route=useRoute()
 const router=useRouter()
 const store=useStore()
 
+const waterMarkEl=ref('')//水印盒子
+
 let chapterId=ref(route.query.chapterId||'') //章节id
 let frompage=ref(route.query.frompage||'')//如果来自报告详情页 则展示底部章节列表
 
@@ -119,6 +122,13 @@ const getChapterReportDetail=async ()=>{
         if(res.data.auth_ok&&res.data.report_chapter_item.classify_name_first==='晨报'){
           getTickerValue()
         }
+
+        if(res.data.auth_ok){
+            // 设置水印
+            nextTick(()=>{
+                useWaterMark(store.state.userInfo.mobile,waterMarkEl)
+            })
+        }
         
         // 获取详情如果为联系销售根据判断条件是否主动申请一次
         if(!res.data.auth_ok){
@@ -388,7 +398,7 @@ const posterParams=computed(()=>{
                     </div>
                     <AudioBox :data="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
                     <!-- <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div> -->
-                    <div class="rich-content">
+                    <div class="rich-content" ref="waterMarkEl">
                         <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div>
                         <div v-html="info.report_chapter_item.content_sub" v-else ></div>
                     </div>
@@ -591,10 +601,12 @@ const posterParams=computed(()=>{
             :deep(span){
                 font-size: 18px !important;
                 line-height: 1.8 !important;
+                background-color: rgba(255, 255, 255, 0) !important;
             }
             :deep(p){
                 font-size: 18px !important;
                 line-height: 1.8 !important;
+                background-color: rgba(255, 255, 255, 0) !important;
             }
             :deep(iframe){
                 width: 100% !important;

src/views/report/Detail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, onUpdated, ref,computed} from 'vue'
+import {onMounted, onUpdated, ref,computed,nextTick} from 'vue'
 import { ElMessageBox } from 'element-plus'
 import moment from 'moment';
 import 'moment/dist/locale/zh-cn'
@@ -12,12 +12,15 @@ import {apiApplyPermission} from '@/api/user'
 import preLoadImg from '@/utils/preLoadImg.js'
 import { useRoute , onBeforeRouteUpdate,useRouter} from 'vue-router';
 import { useStore } from 'vuex';
+import {useWaterMark} from '@/hooks/waterMark.js'
 moment.locale('zh-cn')
 
 const route=useRoute()
 const router=useRouter()
 const store=useStore()
 
+const waterMarkEl=ref('')//水印盒子
+
 let reportId=ref(route.query.reportId||'')
 
 //获取报告对应的ppt图片
@@ -81,6 +84,11 @@ const getReportDetail=async ()=>{
             getAsideMoreRecmd(res.data.report_info)
             getAsideBanner(res.data.report_info)
             getReportPPTImgs()
+
+            // 设置水印
+            nextTick(()=>{
+                useWaterMark(store.state.userInfo.mobile,waterMarkEl)
+            })
         }
 
         //向小程序发送分享数据
@@ -437,7 +445,7 @@ const formatTitle=(e)=>{
                     <AudioBox :data="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
                     <!-- <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div> -->
 
-                    <div class="rich-content">
+                    <div class="rich-content" ref="waterMarkEl">
                         <div v-html="info.report_info.content" v-if="info.auth_ok"></div>
                         <div v-html="info.report_info.content_sub" v-else></div>
                     </div>
@@ -611,16 +619,19 @@ const formatTitle=(e)=>{
             margin-top: 30px;
             line-height: 1.8;
             font-size: 18px;
+            position: relative;
             :deep(img){
                 width: 100% !important;
             }
             :deep(span){
                 font-size: 18px !important;
                 line-height: 1.8 !important;
+                background-color: rgba(255, 255, 255, 0) !important;
             }
             :deep(p){
                 font-size: 18px !important;
                 line-height: 1.8 !important;
+                background-color: rgba(255, 255, 255, 0) !important;
             }
             :deep(iframe){
                 width: 100% !important;