feat: pdf阅览

src/components/PreviewFile.vue

@@ -24,6 +24,9 @@
 </template>
 
 <script>
+import { attachmentWatermarkPreview } from "@/modules/login/api";
+import { objTypeOf, blobToText } from "@/plugins/utils";
+
 export default {
   name: "preview-file",
   props: {
@@ -31,6 +34,7 @@ export default {
       type: Object,
       default() {
         return {
+          id: "",
           url: "",
           type: "",
         };
@@ -45,7 +49,11 @@ export default {
   },
   methods: {
     visibleChange() {
-      this.getFile();
+      if (this.data.id) {
+        this.getIdFile();
+      } else {
+        this.getUrlFile();
+      }
       this.registResizeEvent();
     },
     cancel() {
@@ -54,7 +62,31 @@ export default {
     open() {
       this.modalIsShow = true;
     },
-    getFile() {
+    async getIdFile() {
+      let errorInfo = null;
+      const res = await attachmentWatermarkPreview(this.data.id).catch((e) => {
+        errorInfo = e;
+      });
+
+      // 展示后台错误信息
+      if (errorInfo && objTypeOf(errorInfo) === "blob") {
+        const res = await blobToText(errorInfo).catch(() => {});
+        if (!res) return Promise.reject("下载失败！");
+        const resJson = JSON.parse(res);
+        this.$message.error(resJson);
+        return;
+      }
+
+      this.url = URL.createObjectURL(
+        new Blob([res.data], { type: this.data.type })
+      );
+
+      this.$nextTick(() => {
+        document.getElementById("frame-content").height =
+          window.innerHeight - 51;
+      });
+    },
+    getUrlFile() {
       fetch(this.data.url)
         .then((response) => response.blob())
         .then((blob) => {

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

@@ -44,11 +44,6 @@
       </div>
     </el-dialog>
 
-    <!-- PreviewAttachment -->
-    <preview-attachment
-      ref="PreviewAttachment"
-      :attachment-ids="attachmentIds"
-    ></preview-attachment>
     <!-- PreviewFile -->
     <preview-file ref="PreviewFile" :data="curFile"></preview-file>
   </div>
@@ -68,9 +63,7 @@ import TaskInfo from "./TaskInfo.vue";
 import TaskPaper from "./TaskPaper.vue";
 import TaskPrint from "./TaskPrint.vue";
 import TaskFlow from "./TaskFlow.vue";
-import PreviewAttachment from "@/components/PreviewAttachment.vue";
 import PreviewFile from "@/components/PreviewFile.vue";
-import { attachmentPreview } from "@/modules/login/api";
 
 const initExamTask = {
   id: null,
@@ -147,7 +140,6 @@ export default {
     TaskPaper,
     TaskFlow,
     TaskPrint,
-    PreviewAttachment,
     PreviewFile,
   },
   props: {
@@ -198,10 +190,9 @@ export default {
       loading: false,
       examRule: {},
       dataReady: false,
-      attachmentIds: [],
       // preview file
       curFile: {
-        url: "",
+        id: "",
         type: "",
       },
     };
@@ -301,27 +292,15 @@ export default {
       this.$emit("modified");
     },
     async toViewAttachment(attachment) {
-      if (!attachment.jpgAttachmentId) {
-        if (!attachment.attachmentId) {
-          this.$message.error("附件丢失！");
-          return;
-        }
-        const data = await attachmentPreview(attachment.attachmentId);
-        if (!data[0].url) {
-          this.$message.error("附件丢失！");
-          return;
-        }
-        this.curFile = {
-          url: data[0].url,
-          type: "application/pdf",
-        };
-        this.$refs.PreviewFile.open();
+      if (!attachment.attachmentId) {
+        this.$message.error("附件丢失！");
         return;
       }
-
-      const datas = JSON.parse(attachment.jpgAttachmentId);
-      this.attachmentIds = datas.map((item) => item.attachmentId);
-      this.$refs.PreviewAttachment.open();
+      this.curFile = {
+        id: attachment.attachmentId,
+        type: "application/pdf",
+      };
+      this.$refs.PreviewFile.open();
     },
     async submit() {
       if (!this.$refs.TaskPaper.checkData()) return;

src/modules/login/api.js

@@ -24,6 +24,13 @@ export const attachmentPreview = (ids) => {
 export const attachmentDetail = (id) => {
   return $postParam("/api/admin/common/file/get_one", { id });
 };
+export const attachmentWatermarkPreview = (id) => {
+  return $postParam(
+    "/api/admin/common/pdf/watermark/preview",
+    { id },
+    { responseType: "blob" }
+  );
+};
 export const attachmentDownload = ({ id, type }) => {
   return $postParam("/api/admin/common/file/download", { id, type });
 };

src/modules/print/components/ModifyPlanPaper.vue

@@ -146,11 +146,6 @@
       </div>
     </el-dialog>
 
-    <!-- PreviewAttachment -->
-    <preview-attachment
-      ref="PreviewAttachment"
-      :attachment-ids="attachmentIds"
-    ></preview-attachment>
     <!-- PreviewFile -->
     <preview-file ref="PreviewFile" :data="curFile"></preview-file>
   </div>
@@ -159,8 +154,6 @@
 <script>
 import { updatePlanLinkPaper, linkPaperNumberList } from "../api";
 import { taskApplyDetail } from "../../exam/api";
-import { attachmentPreview } from "../../login/api";
-import PreviewAttachment from "@/components/PreviewAttachment.vue";
 import PreviewFile from "@/components/PreviewFile.vue";
 
 const initModalForm = {
@@ -172,7 +165,7 @@ const initModalForm = {
 
 export default {
   name: "modify-plan-paper",
-  components: { PreviewAttachment, PreviewFile },
+  components: { PreviewFile },
   props: {
     instance: {
       type: Object,
@@ -217,11 +210,10 @@ export default {
           },
         ],
       },
-      // attachmentId preview
-      attachmentIds: [],
+      curAttachment: {},
       // preview file
       curFile: {
-        url: "",
+        id: "",
         type: "",
       },
     };
@@ -284,27 +276,16 @@ export default {
       if (paper) this.paperTypes = paper.paperTypes;
     },
     async toViewAttachment(attachment) {
-      if (!attachment.jpgAttachmentId) {
-        if (!attachment.attachmentId) {
-          this.$message.error("附件丢失！");
-          return;
-        }
-        const data = await attachmentPreview(attachment.attachmentId);
-        if (!data[0].url) {
-          this.$message.error("附件丢失！");
-          return;
-        }
-        this.curFile = {
-          url: data[0].url,
-          type: "application/pdf",
-        };
-        this.$refs.PreviewFile.open();
+      if (!attachment.attachmentId) {
+        this.$message.error("附件丢失！");
         return;
       }
 
-      const datas = JSON.parse(attachment.jpgAttachmentId);
-      this.attachmentIds = datas.map((item) => item.attachmentId);
-      this.$refs.PreviewAttachment.open();
+      this.curFile = {
+        id: attachment.attachmentId,
+        type: "application/pdf",
+      };
+      this.$refs.PreviewFile.open();
     },
     toViewCard(attachment) {
       window.open(

src/modules/print/views/PrintTaskManage.vue

@@ -474,12 +474,6 @@
       task-type="PRINT_PDF_DOWNLOAD"
     ></data-task-dialog>
 
-    <!-- PreviewAttachment -->
-    <preview-attachment
-      ref="PreviewAttachment"
-      :attachment-id="curAttachmentId"
-    ></preview-attachment>
-
     <!-- PreviewFile -->
     <preview-file ref="PreviewFile" :data="curFile"></preview-file>
   </div>
@@ -504,7 +498,6 @@ import { PRINT_TASK_STATUS } from "@/constants/enumerate";
 import pickerOptions from "@/constants/datePickerOptions";
 import { parseTimeRangeDateAndTime } from "@/plugins/utils";
 import PreviewPrintTaskTemplate from "../components/PreviewPrintTaskTemplate";
-import PreviewAttachment from "@/components/PreviewAttachment.vue";
 import PreviewFile from "@/components/PreviewFile.vue";
 
 const defaultTotalInfo = {
@@ -521,7 +514,7 @@ const defaultTotalInfo = {
 
 export default {
   name: "print-task-manage",
-  components: { PreviewPrintTaskTemplate, PreviewAttachment, PreviewFile },
+  components: { PreviewPrintTaskTemplate, PreviewFile },
   data() {
     return {
       filter: {
@@ -569,7 +562,7 @@ export default {
       pickerOptions,
       // preview file
       curFile: {
-        url: "",
+        id: "",
         type: "",
       },
     };
@@ -790,10 +783,6 @@ export default {
         this.rebuildPdf(item);
       }
     },
-    toViewAttachment(curAttachmentId) {
-      this.curAttachmentId = curAttachmentId;
-      this.$refs.PreviewAttachment.open();
-    },
     async rebuildPdf(item) {
       const action = await this.$confirm(
         `确定要重新生成该印刷任务PDF吗？`,
@@ -819,8 +808,6 @@ export default {
         type: "application/pdf",
       };
       this.$refs.PreviewFile.open();
-      // window.open(item.url);
-      // this.padViewDialogVisible = false;
     },
     async toExport() {
       if (this.loading) return;