文章打印下载

package.json

@@ -20,6 +20,7 @@
         "echarts": "^5.3.3",
         "element-china-area-data": "^6.0.2",
         "element-ui": "^2.13.2",
+        "html2pdf.js": "^0.10.3",
         "jquery": "^3.7.1",
         "js-audio-recorder": "^1.0.7",
         "js-base64": "^3.6.1",

src/views/bookShelf/components/PrintModel.vue

@@ -8,7 +8,12 @@
       <p class="article-title">打印预览</p>
     </div>
     <div class="print-model-bottom">
-      <div class="print-model-bottom-left" id="showWaterMark" ref="printArea">
+      <div
+        class="print-model-bottom-left"
+        ref="printArea"
+        id="showWaterMark"
+        :style="{ width: isPrint ? '220mm' : '' }"
+      >
         <div class="print-inner">
           <template
             v-if="
@@ -536,6 +541,9 @@
         </p>
         <div class="item-page" style="padding: 0 24px">
           <el-button @click="goBack" size="small">取消</el-button>
+          <el-button type="primary" @click="generatePDF" size="small"
+            >下载</el-button
+          >
           <el-button type="primary" @click="handlePrint" size="small"
             >打印</el-button
           >
@@ -549,6 +557,7 @@
 import waterMark from "../../../store/watermark";
 import { getToken } from "@/utils/auth";
 import { getLogin } from "@/api/ajax";
+import html2pdf from "html2pdf.js";
 export default {
   props: [
     "titleFontsize",
@@ -699,6 +708,8 @@ export default {
         dateStr: "",
         momo: "",
       },
+      isPrint: false,
+      printNumber: 0,
     };
   },
   methods: {
@@ -931,12 +942,55 @@ export default {
         }
       });
     },
+    // 下载pdf
+    async generatePDF() {
+      let MethodName =
+        "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
+      getLogin(MethodName, {
+        goods_type: 21,
+        date_range: "TODAY",
+        article_id: this.articleId,
+      }).then((res) => {
+        if (res.status === 1) {
+          if (res.print_count < 5) {
+            getLogin(
+              "/ShopServer/Client/PrintRecordManager/AddPrintRecord_Article",
+              {
+                goods_type: 21,
+                article_id: this.articleId,
+              }
+            ).then((res) => {
+              if (res.status === 1) {
+              }
+            });
+            this.$nextTick(() => {
+              this.isPrint = true;
+              const element = document.getElementById("showWaterMark");
+              const opt = {
+                margin: [2.5, 0, 2.5, 0],
+                filename: "二十一世纪英语智慧阅读平台.pdf",
+                image: { type: "jpeg", quality: 0.98 },
+                html2canvas: { scale: 2 }, // 或其他自定义设置，例如scale可以放大内容以便更容易阅读和打印。
+                jsPDF: { unit: "mm", format: "a4", orientation: "portrait" }, // A4尺寸的PDF，纵向打印。
+              };
+              html2pdf().set(opt).from(element).save();
+              setTimeout(() => {
+                this.isPrint = false;
+              }, 100);
+            });
+          } else {
+            this.$message.warning("今日下载次数已达上限");
+          }
+        }
+      });
+    },
   },
   mounted() {
     if (this.articleInfo) {
       this.handleData();
       this.handleHighSentence();
     }
+
     this.$nextTick(() => {
       document.onselectstart = new Function("event.returnValue=false");
     });
@@ -994,6 +1048,7 @@ export default {
       margin: 8px 346px 8px 8px;
       background: #fff;
       flex-shrink: 0;
+
       .print-inner {
         overflow: auto;
         padding: 120px 100px 30px 100px;
@@ -1294,6 +1349,7 @@ export default {
   overflow: hidden;
   position: relative;
   z-index: 9999;
+  // width: 210mm;
 }
 .print-footer {
   width: 100%;

src/views/register.vue

@@ -119,7 +119,9 @@
             >
             </el-option>
           </el-select>
-          <p class="tips">输入机构代码或手动选择，个人用户勿选</p>
+          <p class="tips">
+            集体订报用户请选择自己的年级，个人用户请选“个人用户”
+          </p>
         </el-form-item>
         <el-divider content-position="left">安全信息</el-divider>
         <el-form-item label="手机号" prop="phone">