打印加水印

src/store/watermark.js

@@ -0,0 +1,64 @@
+let watermark = {}
+let watermarkTimer = null
+
+let setWatermark = (str, date) => {
+    let id = '1.23452384164.123412416'
+
+    if (document.getElementById(id) !== null) {
+        document.body.removeChild(document.getElementById(id))
+    }
+
+    //创建一个画布
+    let can = document.createElement('canvas')
+        //设置画布的长宽
+    can.width = 500
+    can.height = 350
+
+    let cans = can.getContext('2d')
+        //旋转角度
+    cans.rotate(-20 * Math.PI / 180)
+    cans.font = '40px Vedana'
+        //设置填充绘画的颜色、渐变或者模式
+    cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
+        //设置文本内容的当前对齐方式
+    cans.textAlign = 'left'
+        //设置在绘制文本时使用的当前文本基线
+    cans.textBaseline = 'Middle'
+        //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
+    cans.fillText(str, can.width / 12, can.height / 2)
+    cans.fillText(date, can.width / 12, can.height / 2)
+    let div = document.createElement('div')
+    div.id = id
+    div.style.pointerEvents = 'none'
+    div.style.top = '30px'
+    div.style.left = '0px'
+    div.style.position = 'absolute'
+    div.style.zIndex = '100000'
+    div.style.width = document.documentElement.clientWidth + 'px'
+    div.style.height = document.documentElement.clientHeight + 'px'
+    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+        //   document.body.appendChild(div)
+    div.style.opacity = '0.4' // 水印的透明度
+    let show = document.getElementById("showWaterMark") // 控制水印显示的区域，设置id = show,表示在该范围内有水印
+    if (!show) {
+        clearInterval(watermarkTimer)
+        return
+    }
+    show.appendChild(div)
+    return id
+}
+
+// 该方法只允许调用一次
+watermark.set = (str, date) => {
+    let id = setWatermark(str, date) // str,date代表的是两行水印。如果需好几个的话再追加。
+    watermarkTimer = setInterval(() => {
+        if (document.getElementById(id) === null) {
+            id = setWatermark(str, date)
+        }
+    }, 500);
+    window.onresize = () => {
+        setWatermark(str, date)
+    };
+}
+
+export default watermark

src/styles/index.scss

@@ -251,4 +251,30 @@ ul {
     background: #3F72F6;
     width: 40px;
     text-align: center;
+}
+
+.watermark {
+    display: none;
+    /* 默认情况下隐藏水印 */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.5;
+    font-size: 24px;
+    color: lightgrey;
+    z-index: -1;
+    overflow: hidden;
+    transform: rotate(-45deg);
+    /* 倾斜水印 */
+    transform-origin: 0 0;
+    /* 设置倾斜的原点为左上角 */
+}
+
+@media print {
+    .watermark {
+        display: block;
+        /* 在打印时显示水印 */
+    }
 }

src/views/bookShelf/articleDetail.vue

@@ -169,6 +169,17 @@
         v-if="ciyunShow">
         <iframe width="100%" height="834px" border="none" :src="'./ciyun/ciyunindex.html?partitionKey=1&searchType=2&articleId='+articleId"></iframe>
     </el-dialog>
+    <el-dialog
+        :visible.sync="printFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        width="100%"
+        top="0"
+        class="articleDetail-dialog"
+        v-if="printFlag"
+    >
+        <print-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :articleInfo="articleInfo" @closePrint="closePrint"></print-model>
+    </el-dialog>
   </div>
 </template>
 
@@ -186,6 +197,7 @@ import InnerTextSearch from "./components/InnerTextSearch.vue"
 import LexicalType from "./components/LexicalType.vue"
 import PracticeModel from "./components/PracticeModel.vue"
 import NotesModel from "./components/NotesModel.vue"
+import printModel from "./components/PrintModel.vue"
 import * as echarts from "echarts";
 import { getLogin } from "@/api/ajax";
 import { getToken } from '@/utils/auth'
@@ -207,7 +219,8 @@ export default {
     InnerTextSearch,
     LexicalType,
     PracticeModel,
-    NotesModel
+    NotesModel,
+    printModel
   },
   data(){
     return{
@@ -653,6 +666,7 @@ export default {
         articleNumber: 0,
         articleInfoFlag: false, // 显示文章信息
         ciyunShow: false, // 显示词云
+        printFlag: false, // 打印
     }
   },
   watch: {
@@ -957,10 +971,12 @@ export default {
     },
     changeArticleType(type,e){
         if(type==='print'||type==='share'||type==='list'||type==='cloud'||type==='chart'){
-            if(type==='share'||type==='cloud'){
+            if(type==='share'||type==='cloud'||type==='print'){
                 if(this.userMessage){
                     if(type==='cloud'){
                         this.ciyunEvent()
+                    }else if(type==='print'){
+                        this.printFlag = true
                     }else{
                         this.handleCreateShare()
                     }
@@ -1159,6 +1175,9 @@ export default {
     },
     closeArticleInfo(){
         this.articleInfoFlag = false
+    },
+    closePrint(){
+        this.printFlag = false
     }
   },
   created(){
@@ -1176,6 +1195,7 @@ export default {
     if(this.$route.query.iss_id){
         this.getIssueDetail()
     }
+
   },
   mounted(){
     let this_ = this;

src/views/bookShelf/components/PrintModel.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="print-model">
+        <div class="print-model-top">
+            <a class="goback" @click="goBack"><i class="el-icon-arrow-left"></i>回到文章</a>
+            <div class="border"></div>
+            <p class="article-title">打印预览</p>
+        </div>
+        <div class="print-model-bottom">
+            <div class="print-model-bottom-left" id="showWaterMark">
+
+            </div>
+            <div class="print-model-bottom-right"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import waterMark from "../../../store/watermark"
+import { getToken } from '@/utils/auth'
+export default {
+    data(){
+        return{
+            userMessage: getToken()?JSON.parse(getToken()):null,
+        }
+    },
+    methods: {
+        goBack(){
+            this.$emit('closePrint')
+        }
+    },
+    mounted(){
+        waterMark.set(this.userMessage.user_name+' '+'13717582171','')
+    }
+};
+</script>
+<style lang="scss" scoped>
+.print-model{
+    background: #F2F3F5;
+    &-top{
+        padding: 8px 16px;
+        border-bottom: 1px solid #EBEBEB;
+        background: #FFF;
+        display: flex;
+        align-items: center;
+        .goback{
+            color:#2F3742;
+            font-size: 20px;
+            font-weight: 500;
+            line-height: 28px;
+            padding-right: 12px;
+            .el-icon-arrow-left{
+                width: 24px;
+                height: 24px;
+            }
+        }
+        .border{
+            background: #E5E6EB;
+            height: 16px;
+            margin-top: 2px;
+            width: 1px;
+        }
+        p {
+            margin: 0 12px;
+            color: #1C2129;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+        }
+    }
+    &-bottom{
+
+        display: flex;
+        &-left{
+            width: 1190px;
+            margin: 8px;
+            min-height: 600px;
+            background: #fff;
+            flex-shrink: 0;
+        }
+        &-right{
+            width: 338px;
+            padding: 24px;
+            background: #FFF;
+        }
+    }
+}
+#showWaterMark{
+    overflow: hidden;
+    position: relative;
+    z-index: 9999;
+}
+</style>