feat: pdf预览

src/assets/styles/pages.scss

@@ -1686,3 +1686,15 @@
     text-align: right;
   }
 }
+
+// preview-file
+.page-dialog.preview-file {
+  .el-dialog.is-fullscreen {
+    overflow: hidden;
+    .el-dialog__body {
+      padding: 50px 0 0;
+      overflow: hidden;
+      min-height: inherit;
+    }
+  }
+}

src/components/PreviewFile.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-dialog
+    class="page-dialog preview-file"
+    :visible.sync="modalIsShow"
+    title="预览"
+    fullscreen
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @open="visibleChange"
+    @close="removeResizeEvent"
+  >
+    <iframe
+      v-if="url && modalIsShow"
+      :src="url"
+      id="frame-content"
+      width="100%"
+      height="600px"
+    >
+    </iframe>
+
+    <div slot="footer"></div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "preview-file",
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          url: "",
+          type: "",
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      url: "",
+    };
+  },
+  methods: {
+    visibleChange() {
+      this.getFile();
+      this.registResizeEvent();
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    getFile() {
+      fetch(this.data.url)
+        .then((response) => response.blob())
+        .then((blob) => {
+          this.url = URL.createObjectURL(
+            new Blob([blob], { type: this.data.type })
+          );
+
+          this.$nextTick(() => {
+            document.getElementById("frame-content").height =
+              window.innerHeight - 50;
+          });
+        })
+        .catch((error) => console.error("Error fetching PDF:", error));
+    },
+    resizeEvent() {
+      document.getElementById("frame-content").height = window.innerHeight - 50;
+    },
+    registResizeEvent() {
+      window.addEventListener("resize", this.resizeEvent);
+    },
+    removeResizeEvent() {
+      window.removeEventListener("resize", this.resizeEvent);
+    },
+  },
+  beforeDestroy() {
+    this.removeResizeEvent();
+  },
+};
+</script>

src/modules/exam/components/UploadPaperDialog.vue

@@ -1,61 +1,68 @@
 <template>
-  <el-dialog
-    class="upload-paper-dialog"
-    :visible.sync="modalIsShow"
-    :title="`上传${curConfig.title}`"
-    top="10vh"
-    width="620px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    append-to-body
-    destroy-on-close
-    @opened="visibleChange"
-  >
-    <div class="file-upload-body">
-      <p class="mb-2">
-        上传的{{ curConfig.title }}仅限{{ curConfig.format.join(",") }}文件
-      </p>
-      <upload-file-view
-        input-width="360px"
-        :format="curConfig.format"
-        :max-size="curConfig.maxSize"
-        :upload-url="curConfig.uploadUrl"
-        :upload-data="curConfig.uploadData"
-        @uploading="uplaoding"
-        @valid-error="validError"
-        @upload-error="uplaodError"
-        @upload-success="uploadSuccess"
-        ref="UploadFileView"
-      ></upload-file-view>
-      <el-button type="info" @click="toPreview" style="margin-left: 10px"
-        >预览</el-button
-      >
-      <div v-if="showTemp" class="mt-2">
-        <span>试卷模板：</span>
-        <a
-          class="cont-link"
-          href="/temp/paper-template.doc"
-          download="试卷上传模板.doc"
-          >试卷上传模板.doc</a
+  <div>
+    <el-dialog
+      class="upload-paper-dialog"
+      :visible.sync="modalIsShow"
+      :title="`上传${curConfig.title}`"
+      top="10vh"
+      width="620px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      destroy-on-close
+      @opened="visibleChange"
+    >
+      <div class="file-upload-body">
+        <p class="mb-2">
+          上传的{{ curConfig.title }}仅限{{ curConfig.format.join(",") }}文件
+        </p>
+        <upload-file-view
+          input-width="360px"
+          :format="curConfig.format"
+          :max-size="curConfig.maxSize"
+          :upload-url="curConfig.uploadUrl"
+          :upload-data="curConfig.uploadData"
+          @uploading="uplaoding"
+          @valid-error="validError"
+          @upload-error="uplaodError"
+          @upload-success="uploadSuccess"
+          ref="UploadFileView"
+        ></upload-file-view>
+        <el-button type="info" @click="toPreview" style="margin-left: 10px"
+          >预览</el-button
         >
+        <div v-if="showTemp" class="mt-2">
+          <span>试卷模板：</span>
+          <a
+            class="cont-link"
+            href="/temp/paper-template.doc"
+            download="试卷上传模板.doc"
+            >试卷上传模板.doc</a
+          >
+        </div>
       </div>
-    </div>
-    <div slot="footer">
-      <el-button type="primary" @click="confirm" :disabled="loading"
-        >确认</el-button
-      >
-      <el-button @click="cancel">关闭</el-button>
-    </div>
-  </el-dialog>
+      <div slot="footer">
+        <el-button type="primary" @click="confirm" :disabled="loading"
+          >确认</el-button
+        >
+        <el-button @click="cancel">关闭</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- PreviewFile -->
+    <preview-file ref="PreviewFile" :data="curFile"></preview-file>
+  </div>
 </template>
 
 <script>
 import UploadFileView from "@/components/UploadFileView.vue";
+import PreviewFile from "@/components/PreviewFile.vue";
+
 import { attachmentPreview } from "../../login/api";
 
 export default {
   name: "upload-paper-dialog",
-  components: { UploadFileView },
+  components: { UploadFileView, PreviewFile },
   props: {
     paperAttachment: {
       type: Object,
@@ -94,6 +101,10 @@ export default {
       },
       curConfig: { format: [], uploadUrl: "" },
       showTemp: false,
+      curFile: {
+        url: "",
+        type: "",
+      },
     };
   },
   computed: {
@@ -178,11 +189,18 @@ export default {
         return;
       }
 
-      let attachmentId = this.attachment.attachmentId;
-      if (this.IS_UPLOAD_PAPER) this.hasViewed = true;
-
+      const attachmentId = this.attachment.attachmentId;
       const data = await attachmentPreview(attachmentId);
-      window.open(data[0]?.url);
+      if (this.IS_UPLOAD_PAPER) {
+        this.hasViewed = true;
+        this.curFile = {
+          url: data[0]?.url,
+          type: "application/pdf",
+        };
+        this.$refs.PreviewFile.open();
+      } else {
+        window.open(data[0]?.url);
+      }
     },
   },
 };

src/modules/exam/components/createExamAndPrintTask/InfoExamTask.vue

@@ -463,6 +463,8 @@
       :card-id="curAttachment.cardId"
       show-watermark
     ></card-preview-dialog>
+    <!-- PreviewFile -->
+    <preview-file ref="PreviewFile" :data="curFile"></preview-file>
   </div>
 </template>
 
@@ -472,6 +474,8 @@ import UploadPaperDialog from "../UploadPaperDialog.vue";
 import SimpleImagePreview from "@/components/SimpleImagePreview.vue";
 import ModifyCard from "../../../card/components/ModifyCard.vue";
 import SelectTikuPaperDialog from "./SelectTikuPaperDialog.vue";
+import PreviewFile from "@/components/PreviewFile.vue";
+
 import { COMMON_CARD_RULE_ID } from "../../../../constants/enumerate";
 import { cardForSelectList } from "../../api";
 import {
@@ -496,6 +500,7 @@ export default {
     SelectTikuPaperDialog,
     CardBuildDialog,
     CardPreviewDialog,
+    PreviewFile,
   },
   data() {
     return {
@@ -583,6 +588,11 @@ export default {
       // image-preview
       curImage: {},
       curImageIndex: 0,
+      // preview file
+      curFile: {
+        url: "",
+        type: "",
+      },
     };
   },
   computed: {
@@ -1149,7 +1159,12 @@ export default {
     },
     toViewPaper(attachment) {
       if (!attachment.paperUrl) return;
-      window.open(attachment.paperUrl);
+      this.curFile = {
+        url: attachment.paperUrl,
+        type: "application/pdf",
+      };
+      this.$refs.PreviewFile.open();
+      // window.open(attachment.paperUrl);
     },
     // exam-task-detail edit
     addAtachment() {

src/modules/exam/components/taskApply/TaskPaper.vue

@@ -465,6 +465,8 @@
       @on-next="toNextImage"
       ref="SimpleImagePreview"
     ></simple-image-preview>
+    <!-- PreviewFile -->
+    <preview-file ref="PreviewFile" :data="curFile"></preview-file>
   </div>
 </template>
 
@@ -481,6 +483,7 @@ import SelectTikuPaperDialog from "../createExamAndPrintTask/SelectTikuPaperDial
 import CardBuildDialog from "../../../card/components/CardBuildDialog.vue";
 import CardPreviewDialog from "../../../card/components/CardPreviewDialog.vue";
 import SimpleImagePreview from "../../../../components/SimpleImagePreview.vue";
+import PreviewFile from "../../../../components/PreviewFile.vue";
 import ModifyCard from "../../../card/components/ModifyCard.vue";
 
 export default {
@@ -488,6 +491,7 @@ export default {
   components: {
     UploadPaperDialog,
     SimpleImagePreview,
+    PreviewFile,
     ModifyCard,
     CardBuildDialog,
     CardPreviewDialog,
@@ -530,6 +534,11 @@ export default {
       // image-preview
       curImage: {},
       curImageIndex: 0,
+      // preview file
+      curFile: {
+        url: "",
+        type: "",
+      },
     };
   },
   computed: {
@@ -991,7 +1000,12 @@ export default {
     },
     toViewPaper(attachment) {
       if (!attachment.paperUrl) return;
-      window.open(attachment.paperUrl);
+      this.curFile = {
+        url: attachment.paperUrl,
+        type: "application/pdf",
+      };
+      this.$refs.PreviewFile.open();
+      // window.open(attachment.paperUrl);
     },
     // image-preview
     toPreview(index) {