中英文研报增加水印

.env.development

@@ -1,4 +1,4 @@
 VITE_APP_BASE_URL="/"
 VITE_APP_OUTDIR="eta_report_front"
 
-VITE_APP_BASEAPIURL="https://share.hzinsights.com/api"
+VITE_APP_BASEAPIURL="/api"

package.json

@@ -10,13 +10,15 @@
   "dependencies": {
     "@vant/touch-emulator": "^1.3.2",
     "axios": "^0.24.0",
+    "js-base64": "^3.7.5",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "normalize.css": "^8.0.1",
     "vant": "^3.3.4",
     "vue": "^3.2.16",
     "vue-router": "^4.0.12",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "watermark-js-plus": "^1.3.16"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.3",

src/style/common.scss

@@ -22,4 +22,11 @@ input{
 
 li {
     list-style: none;
+}
+
+// 禁止页面打印
+@media print{
+    body{
+      display: none;
+    }
 }

src/views/report/reportDetail.vue

@@ -159,7 +159,8 @@ import _ from 'lodash';
 import wxShare from '../utils/wxShare.js';
 
 import AudioPlay from './audioPlay.vue';
-
+import { Watermark,BlindWatermark } from 'watermark-js-plus'
+import { Base64 } from 'js-base64';
 export default {
   components: { AudioPlay },
   data() {
@@ -289,8 +290,50 @@ export default {
           }
         });
         wxShare(document.location.href,H5ShareName || document.title,wxShareTitle,H5ReportShareImg,0);
+        //水印
+        localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
+        const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
+        const waterMarkStr=Base64.decode(temwaterMarkStr)
+        this.$nextTick(()=>{
+          if(Data.WatermarkReport==='true'){
+            this.setWaterMark(waterMarkStr)
+          }
+          this.setBlindWaterMark(waterMarkStr)
+        })
     },
 
+    setWaterMark(str){
+      const text=str||''
+      const target=document.getElementById('resetcss')
+      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");
+      target.style.background = "url(" + data + ") repeat";
+    },
+
+    // 设置水印
+    setBlindWaterMark(str){
+      
+      const blindwatermark = new BlindWatermark({
+        content: str||'',
+        width: 200,
+        height: 200,
+        onSuccess: () => {
+          // success callback
+        }
+      })
+      blindwatermark.create()
+    },
+
+
     /*内容分割*/
     splitContentHandle(content) {
       const arr = content.split("</p>");

src/views/reportEn/detail.vue

@@ -113,6 +113,8 @@ import {
 } from "@/api/api.js";
 import _ from 'lodash';
 import wxShare from '../utils/wxShare.js'
+import { Watermark,BlindWatermark } from 'watermark-js-plus'
+import { Base64 } from 'js-base64';
 export default {
   data() {
     return {
@@ -225,6 +227,48 @@ export default {
           }
         });
         wxShare(document.location.href,H5ShareEnName || document.title,wxShareTitle,H5ReportShareImg,0);
+    
+        localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
+        const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
+        const waterMarkStr=Base64.decode(temwaterMarkStr)
+        this.$nextTick(()=>{
+          if(Data.WatermarkReport==='true'){
+            this.setWaterMark(waterMarkStr)
+          }
+          this.setBlindWaterMark(waterMarkStr)
+        })
+
+    },
+
+    setWaterMark(str){
+      const text=str||''
+      const target=document.getElementById('resetcss')
+      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");
+      target.style.background = "url(" + data + ") repeat";
+    },
+
+    // 设置水印
+    setBlindWaterMark(str){
+      
+      const blindwatermark = new BlindWatermark({
+        content: str||'',
+        width: 200,
+        height: 200,
+        onSuccess: () => {
+          // success callback
+        }
+      })
+      blindwatermark.create()
     },
 
     /*内容分割*/

vite.config.js

@@ -17,5 +17,13 @@ export default ({mode})=>defineConfig({
   },
   server:{
     host:'0.0.0.0',
+    proxy: {
+			'/api': {
+				// target: 'http://8.136.199.33:8608',
+				target: 'http://testetareport.hzinsights.com',
+				changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '/api')
+			}
+		},
   }
 })