From 9fc1d31866755c54dddd3b7bf41bf065ed96452c Mon Sep 17 00:00:00 2001
From: hehaoqi <935445610@qq.com>
Date: Wed, 20 May 2020 09:51:25 +0800
Subject: [PATCH] add setwaterMark()

---
 src/views/Excel_Export.vue | 42 ++++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/views/Excel_Export.vue b/src/views/Excel_Export.vue
index 4e34378..7a538bd 100644
--- a/src/views/Excel_Export.vue
+++ b/src/views/Excel_Export.vue
@@ -1,5 +1,11 @@
 <template>
-    <el-button type="primary" @click="ExportToExcel">Excel-Export</el-button>
+    <div class="watermark">
+        <el-button class="excel_button" type="primary" @click="ExportToExcel">Excel-Export</el-button>
+        <div :style="`color:${color};transform: rotate(${rotate}deg);width:${wm_w}%;height:${wm_h}%;opacity: ${opacity}`"
+             class="wm" v-for="(i,index) in watermarkNum"
+             :key="index"
+        >{{watermarkText}}</div>
+    </div>
 </template>
 
 <script>
@@ -13,11 +19,23 @@
                     {id: '2',name: 'api',username:  'api接口',sex: '男',email: 'api@wyy.com'},
                     {id: '3',name: 'vue-cli3',username: 'vue.js',sex: '男',email: 'vue@wyy.com'},
                     {id: '4',name: 'elementUI',username: 'elementUI模板',sex: '男',email: 'elementUI@wyy.com'}
-                ]
+                ],
+                watermarkNum: 0, //水印数量
+                watermarkRow: 2, //列数
+                watermarkLine:2, //行数
+                rotate: -30,     //文字旋转角度
+                color: '#ccc',   //文字颜色
+                watermarkText: '仅供测试使用',    //水印文本
+                wm_w: 0,          //水印宽度百分比
+                wm_h: 0,           //水印高度百分比
+                opacity:0.2        //水印透明度
             }
         },
         created(){},
-        mounted(){},
+        mounted(){
+            //在挂载后载入水印
+            this.setwaterMark();
+        },
         methods: {
             //Excel导出
             ExportToExcel(){
@@ -28,13 +46,29 @@
                 const data = this.formatJson(filterVal,list);
                 export_json_to_excel(tHeader,data,'测试Excel导出');
             },
+            //Excel导出函数
             formatJson(filterVal,jsonData){
                 return jsonData.map(v => filterVal.map(j => v[j]))
+            },
+            //创建水印
+            setwaterMark(){
+                let that = this;
+                that.watermarkNum = that.watermarkRow * that.watermarkLine;
+                that.wm_w = 100 / that.watermarkRow;
+                that.wm_h = 100 / that.watermarkLine;
             }
+
         }
     }
 </script>
 
 <style lang="less" scoped>
-
+    .watermark{
+        width: 100%;
+        height: auto;
+        display: flex;
+        .excel_button{
+            margin-top: 120px;
+        }
+    }
 </style>
-- 
GitLab