瀏覽代碼

打印文章除水印版

natasha 1 天之前
父節點
當前提交
f98fa98316
共有 1 個文件被更改,包括 224 次插入204 次删除
  1. 224 204
      src/views/bookShelf/components/LexicalType.vue

+ 224 - 204
src/views/bookShelf/components/LexicalType.vue

@@ -519,206 +519,193 @@
       }"
       v-if="isPrintMore"
     >
-      <template
-        v-if="
-          resArr[0] &&
-          resArr[0].wordsList[0] &&
-          resArr[0].wordsList[0].hasOwnProperty('pno') &&
-          resArr[0].wordsList[0].pno === 0
-        "
-      >
-        <h2 :class="['NNPE-word']">
+      <div class="print-inner">
+        <template
+          v-if="
+            resArr[0] &&
+            resArr[0].wordsList[0] &&
+            resArr[0].wordsList[0].hasOwnProperty('pno') &&
+            resArr[0].wordsList[0].pno === 0
+          "
+        >
+          <h2 :class="['NNPE-word']">
+            <span
+              v-for="(itemR, indexR) in resArr[0].wordsList"
+              :key="indexR"
+              :style="{
+                color: colorObj.titleColor,
+                fontSize: titleFontsize + 'px',
+                lineHeight: titleFontsize + 8 + 'px',
+                marginRight: itemR.tokens[9] === '' ? '' : '10px',
+                fontWeight: '700',
+                cursor: 'pointer',
+              }"
+              :class="[
+                itemR.tokens[9] === '' ? 'marginRight' : '',
+                itemR.marginRight ? 'marginSingleRight' : '',
+              ]"
+            >
+              <span
+                class="word-bottoms"
+                v-if="
+                  hideSelectWord &&
+                  selectWordType.indexOf(itemR.tokens[11]) > -1
+                "
+                :style="{
+                  width:
+                    hideSelectWord &&
+                    selectWordType.indexOf(itemR.tokens[11]) > -1
+                      ? itemR.tokens[2].length * 20 + 'px'
+                      : '',
+                  borderColor: colorObj.titleColor,
+                }"
+              >
+              </span>
+              <span
+                v-else
+                class="NNPE-chs"
+                :class="[
+                  itemR.type,
+                  itemR.tokens[9] === '' ? 'marginRight' : '',
+                  itemR.marginRight ? 'marginSingleRight' : '',
+                  itemR.highIndex ? 'fontWeight' : '',
+                  itemR.color ? 'wordSelected' : '',
+                  selectWordType.indexOf(itemR.tokens[11]) > -1
+                    ? !hideSelectWord || itemR.showSelectWord
+                      ? ''
+                      : 'word-opacity'
+                    : '',
+                ]"
+                :style="{
+                  background: itemR.color ? itemR.color : '',
+                  borderColor: itemR.borderColor ? itemR.borderColor : '',
+                  color:
+                    tabsIndex === 1
+                      ? selectSentenceIdList.indexOf(itemR.sent_id) > -1
+                        ? colorObj.type === 'white' ||
+                          colorObj.type === 'darkGreen'
+                          ? sentenceLengthType[itemR.sententLenType].color
+                          : sentenceLengthType[itemR.sententLenType].dark
+                        : '#929CA8'
+                      : tabsIndex === 0
+                      ? selectWordType.indexOf(itemR.tokens[11]) > -1
+                        ? vocabularyType[itemR.tokens[11]].color
+                        : colorObj.type === 'white' ||
+                          colorObj.type === 'darkGreen'
+                        ? ''
+                        : ''
+                      : '',
+                }"
+                @click="itemR.showSelectWord = !itemR.showSelectWord"
+                >{{ itemR.tokens[2] }}</span
+              >
+            </span>
+          </h2>
+        </template>
+        <h2 v-else>
           <span
-            v-for="(itemR, indexR) in resArr[0].wordsList"
-            :key="indexR"
             :style="{
               color: colorObj.titleColor,
               fontSize: titleFontsize + 'px',
               lineHeight: titleFontsize + 8 + 'px',
-              marginRight: itemR.tokens[9] === '' ? '' : '10px',
+              marginRight: '10px',
               fontWeight: '700',
               cursor: 'pointer',
             }"
-            :class="[
-              itemR.tokens[9] === '' ? 'marginRight' : '',
-              itemR.marginRight ? 'marginSingleRight' : '',
-            ]"
+            >{{ articleInfo.art_title }}</span
           >
-            <div
-              class="word-bottoms"
-              v-if="
-                hideSelectWord && selectWordType.indexOf(itemR.tokens[11]) > -1
-              "
-              :style="{
-                width:
-                  hideSelectWord &&
-                  selectWordType.indexOf(itemR.tokens[11]) > -1
-                    ? itemR.tokens[2].length * 20 + 'px'
-                    : '',
-              }"
-            >
-              <span :style="{ background: colorObj.titleColor }"></span>
-            </div>
-            <span
-              v-else
-              class="NNPE-chs"
-              :class="[
-                itemR.type,
-                itemR.tokens[9] === '' ? 'marginRight' : '',
-                itemR.marginRight ? 'marginSingleRight' : '',
-                itemR.highIndex ? 'fontWeight' : '',
-                itemR.color ? 'wordSelected' : '',
-                selectWordType.indexOf(itemR.tokens[11]) > -1
-                  ? !hideSelectWord || itemR.showSelectWord
-                    ? ''
-                    : 'word-opacity'
-                  : '',
-              ]"
-              :style="{
-                background: itemR.color ? itemR.color : '',
-                borderColor: itemR.borderColor ? itemR.borderColor : '',
-                color:
-                  tabsIndex === 1
-                    ? selectSentenceIdList.indexOf(itemR.sent_id) > -1
-                      ? colorObj.type === 'white' ||
-                        colorObj.type === 'darkGreen'
-                        ? sentenceLengthType[itemR.sententLenType].color
-                        : sentenceLengthType[itemR.sententLenType].dark
-                      : '#929CA8'
-                    : tabsIndex === 0
-                    ? selectWordType.indexOf(itemR.tokens[11]) > -1
-                      ? vocabularyType[itemR.tokens[11]].color
-                      : colorObj.type === 'white' ||
-                        colorObj.type === 'darkGreen'
-                      ? ''
-                      : ''
-                    : '',
-              }"
-              @click="itemR.showSelectWord = !itemR.showSelectWord"
-              >{{ itemR.tokens[2] }}</span
-            >
-          </span>
         </h2>
-      </template>
-      <h2 v-else>
-        <span
+        <h6
+          class="nnpe-article-author"
           :style="{
-            color: colorObj.titleColor,
-            fontSize: titleFontsize + 'px',
-            lineHeight: titleFontsize + 8 + 'px',
-            marginRight: '10px',
-            fontWeight: '700',
-            cursor: 'pointer',
+            color: colorObj.sourceColor,
+            fontSize: '14px',
+            lineHeight: '22px',
+            fontWeight: '400',
           }"
-          >{{ articleInfo.art_title }}</span
         >
-      </h2>
-      <h6
-        class="nnpe-article-author"
-        :style="{
-          color: colorObj.sourceColor,
-          fontSize: '14px',
-          lineHeight: '22px',
-          fontWeight: '400',
-        }"
-      >
-        {{
-          articleInfo.art_author +
-          " · " +
-          articleInfo.study_phase_name +
-          "版 · 第 " +
-          articleInfo.iss_no +
-          " 期 · " +
-          articleInfo.release_date +
-          " · " +
-          articleInfo.chn_item +
-          (articleInfo.page_no_in_pub
-            ? " · P" + articleInfo.page_no_in_pub
-            : "")
-        }}
-      </h6>
-      <template v-if="resArr.length > 0">
-        <div class="table-box">
+          {{
+            articleInfo.art_author +
+            " · " +
+            articleInfo.study_phase_name +
+            "版 · 第 " +
+            articleInfo.iss_no +
+            " 期 · " +
+            articleInfo.release_date +
+            " · " +
+            articleInfo.chn_item +
+            (articleInfo.page_no_in_pub
+              ? " · P" + articleInfo.page_no_in_pub
+              : "")
+          }}
+        </h6>
+        <template v-if="resArr.length > 0">
           <div
             :class="['NNPE-detail']"
             v-for="(item, index) in resArr"
             :key="'detail' + index"
           >
-            <div class="wordsList-box">
-              <div class="nnpe-sentence-box">
-                <div
-                  v-for="(pItem, pIndex) in item.wordsList"
-                  :key="'wordsList' + pIndex"
-                >
-                  <template v-if="pItem.pno !== 0">
-                    <div :class="['NNPE-word']">
-                      <div
-                        class="word-bottoms"
-                        v-if="
-                          hideSelectWord &&
-                          selectWordType.indexOf(pItem.tokens[11]) > -1
-                        "
-                        :style="{
-                          width:
-                            hideSelectWord &&
-                            selectWordType.indexOf(pItem.tokens[11]) > -1
-                              ? pItem.tokens[2].length * 20 + 'px'
-                              : '',
-                        }"
-                      >
-                        <span
-                          :style="{
-                            background:
-                              colorObj.type === 'white' ||
+            <template v-for="(pItem, pIndex) in item.wordsList">
+              <template v-if="pItem.pno !== 0">
+                <div :class="['NNPE-word']" :key="'wordsList' + pIndex">
+                  <span
+                    class="word-bottoms"
+                    v-if="
+                      hideSelectWord &&
+                      selectWordType.indexOf(pItem.tokens[11]) > -1
+                    "
+                    :style="{
+                      width:
+                        hideSelectWord &&
+                        selectWordType.indexOf(pItem.tokens[11]) > -1
+                          ? pItem.tokens[2].length * 20 + 'px'
+                          : '',
+                      borderColor:
+                        colorObj.type === 'white' ||
+                        colorObj.type === 'darkGreen'
+                          ? '#2F3742'
+                          : '#C1C5CD',
+                    }"
+                  >
+                  </span>
+                  <span
+                    v-else
+                    class="NNPE-chs"
+                    :class="[
+                      pItem.noBefore ? 'marginLeft' : '',
+                      pItem.noAfter ? 'marginRight' : '',
+                      pItem.marginRight ? 'marginSingleRight' : '',
+                      pItem.color ? 'wordSelected' : '',
+                      selectWordType.indexOf(pItem.tokens[11]) > -1
+                        ? !hideSelectWord || pItem.showSelectWord
+                          ? ''
+                          : 'word-opacity'
+                        : '',
+                    ]"
+                    :style="{
+                      fontSize: wordFontsize + 'px',
+                      color:
+                        tabsIndex === 1
+                          ? selectSentenceIdList.indexOf(pItem.sent_id) > -1
+                            ? colorObj.type === 'white' ||
                               colorObj.type === 'darkGreen'
-                                ? '#2F3742'
-                                : '#C1C5CD',
-                          }"
-                        ></span>
-                      </div>
-                      <span
-                        v-else
-                        class="NNPE-chs"
-                        :class="[
-                          pItem.noBefore ? 'marginLeft' : '',
-                          pItem.noAfter ? 'marginRight' : '',
-                          pItem.marginRight ? 'marginSingleRight' : '',
-                          pItem.color ? 'wordSelected' : '',
-                          selectWordType.indexOf(pItem.tokens[11]) > -1
-                            ? !hideSelectWord || pItem.showSelectWord
-                              ? ''
-                              : 'word-opacity'
-                            : '',
-                        ]"
-                        :style="{
-                          fontSize: wordFontsize + 'px',
-                          color:
-                            tabsIndex === 1
-                              ? selectSentenceIdList.indexOf(pItem.sent_id) > -1
-                                ? colorObj.type === 'white' ||
-                                  colorObj.type === 'darkGreen'
-                                  ? sentenceLengthType[pItem.sententLenType]
-                                      .color
-                                  : sentenceLengthType[pItem.sententLenType]
-                                      .dark
-                                : '#929CA8'
-                              : tabsIndex === 0
-                              ? selectWordType.indexOf(pItem.tokens[11]) > -1
-                                ? vocabularyType[pItem.tokens[11]].color
-                                : colorObj.type === 'white' ||
-                                  colorObj.type === 'darkGreen'
-                                ? '#2F3742'
-                                : '#C1C5CD'
-                              : '#2F3742',
-                        }"
-                        @click="pItem.showSelectWord = !pItem.showSelectWord"
-                        >{{ pItem.tokens[2] }}</span
-                      >
-                    </div>
-                  </template>
+                              ? sentenceLengthType[pItem.sententLenType].color
+                              : sentenceLengthType[pItem.sententLenType].dark
+                            : '#929CA8'
+                          : tabsIndex === 0
+                          ? selectWordType.indexOf(pItem.tokens[11]) > -1
+                            ? vocabularyType[pItem.tokens[11]].color
+                            : colorObj.type === 'white' ||
+                              colorObj.type === 'darkGreen'
+                            ? '#2F3742'
+                            : '#C1C5CD'
+                          : '#2F3742',
+                    }"
+                    >{{ pItem.tokens[2] }}</span
+                  >
                 </div>
-              </div>
-            </div>
+              </template>
+            </template>
             <template v-if="articleImg && articleImg[index]">
               <figure
                 v-for="(itemI, indexI) in articleImg[index]"
@@ -734,8 +721,8 @@
               </figure>
             </template>
           </div>
-        </div>
-      </template>
+        </template>
+      </div>
     </div>
   </div>
 </template>
@@ -1142,6 +1129,10 @@ export default {
       );
     },
     handlePrint() {
+      if (this.selectWordType.length === 0 || !this.hideSelectWord) {
+        this.$message.warning("未选中任何词汇或未开启隐藏标记词");
+        return;
+      }
       let MethodName =
         "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
       getLogin(MethodName, {
@@ -1168,7 +1159,7 @@ export default {
                 "",
                 "showWaterMarkLexical"
               );
-            }, 100);
+            }, 1000);
             setTimeout(() => {
               this.$nextTick(() => {
                 this.$print(this.$refs["printAreaManys"], {
@@ -1182,11 +1173,12 @@ export default {
                   },
                   onEnd: () => {
                     // console.log("打印完成");
+                    // window.location.reload();
                   },
                 });
                 this.isPrintMore = false;
               });
-            }, 500);
+            }, 1500);
           } else {
             this.$message.warning("每篇文章打印+下载次数共5次,现已达上限。");
           }
@@ -1563,35 +1555,63 @@ export default {
   max-width: 100%;
 }
 :deep figure {
+  width: 100%;
   margin: 1em 0;
   text-align: center;
   img {
     max-width: 70%;
   }
 }
-.NNPE-word {
-  height: 100%;
-  .NNPE-chs {
-    padding: 0 3px;
-    font-family: "Smartisan";
-    line-height: 150%;
-    color: #000000;
-  }
-  .marginRight {
-    padding-right: 0;
+.print-model-bottom-left {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: auto;
+  z-index: -1;
+  .print-inner {
+    padding: 120px 100px 30px 100px;
+    width: 100%;
+    overflow: auto;
   }
-  .marginLeft {
-    padding-left: 0;
+  .NNPE-word {
+    height: 100%;
+    .NNPE-chs {
+      padding: 0 3px;
+      font-family: "Smartisan";
+      line-height: 150%;
+      color: #000000;
+    }
+    .marginRight {
+      padding-right: 0;
+    }
+    .marginLeft {
+      padding-left: 0;
+    }
   }
-}
-.word-bottoms {
-  border-bottom: 1px solid #2f3742;
-  height: 100%;
-  margin: 0 3px;
-}
-h2.NNPE-word {
   .word-bottoms {
-    border-bottom-width: 2px;
+    border-bottom: 1px solid #2f3742;
+    height: 100%;
+    margin: 0 3px;
+    display: inline-block;
+  }
+  h2.NNPE-word {
+    display: flex;
+    flex-flow: wrap;
+    width: 100%;
+    justify-content: center;
+    .word-bottoms {
+      border-bottom-width: 2px;
+    }
+  }
+  h6 {
+    width: 100%;
+    text-align: center;
+  }
+  .NNPE-detail {
+    display: flex;
+    flex-flow: wrap;
+    align-items: end;
+    width: 100%;
   }
 }
 </style>