From 1a412e508aa1c954e4abe14f08808612b927fce4 Mon Sep 17 00:00:00 2001
From: yanyan <evelyn_yanyan@sina.cn>
Date: Thu, 5 Jun 2025 15:49:39 +0800
Subject: [PATCH] =?UTF-8?q?pdf=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           | 97 ++++++++++++++++++---
 package.json                                |  3 +-
 src/views/enforce/enforceNoticeDetail.vue   | 95 ++++++++++++++++----
 src/views/enterprise/systemNoticeDetail.vue | 92 +++++++++++++++----
 4 files changed, 239 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d584200..e453f56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,9 +34,10 @@
         "vue-dompurify-html": "^5.0.1",
         "vue-i18n": "^9.9.1",
         "vue-pdf": "^1.0.0",
-        "vue-pdf-embed": "^2.0.3",
+        "vue-pdf-embed": "^1.2.1",
         "vue-qrcode-reader": "^5.5.3",
         "vue-router": "^4.3.0",
+        "vue3-pdfjs": "^0.1.6",
         "weixin-js-sdk": "^1.6.5"
       },
       "devDependencies": {
@@ -6242,6 +6243,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==",
+      "deprecated": "dommatrix is no longer maintained. Please use @thednp/dommatrix."
+    },
     "node_modules/dompurify": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
@@ -14816,14 +14823,11 @@
       "integrity": "sha512-jnwYXe5yZcW+26VzLX3Pvo9kt+yWZMEk7P5SFgJ+KT7q2cVPZn3XQGpjQ+19FsD6VWO4BHpEx64kslTOMuZSOw=="
     },
     "node_modules/vue-pdf-embed": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-2.1.2.tgz",
-      "integrity": "sha512-/j++oknFBY9x/MgEFBo9tSuOXS0Z9COlywwLhMREhiGfmuQqpnGy5T+SwVIXxR1tmdzM/lHog8JL7HOAgXT1aw==",
-      "dependencies": {
-        "pdfjs-dist": "^4.10.38"
-      },
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-1.2.1.tgz",
+      "integrity": "sha512-4uUm4wxaEGT9cS1cyuagAmMJjBxfQXWG1MvdGPesD3CiXhhSp4i0VMUCYwhFXtZ5+QqWv4mXbfLJ29Wpt+Qcuw==",
       "peerDependencies": {
-        "vue": "^3.3.0"
+        "vue": "^2.x || ^3.x"
       }
     },
     "node_modules/vue-qrcode-reader": {
@@ -14852,6 +14856,35 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-pdfjs": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/vue3-pdfjs/-/vue3-pdfjs-0.1.6.tgz",
+      "integrity": "sha512-7UaWbsp8wNqB0y/rRlyo5yRb0S+XOkkSpmdUuS267Dhi07Pt4RFEetQ8inrpf/aTFJwGnW0Uc/UE4p376s+Zmw==",
+      "dependencies": {
+        "pdfjs-dist": "^2.10.377",
+        "vue": "^3.2.19"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/vue3-pdfjs/node_modules/pdfjs-dist": {
+      "version": "2.16.105",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz",
+      "integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==",
+      "dependencies": {
+        "dommatrix": "^1.0.3",
+        "web-streams-polyfill": "^3.2.1"
+      },
+      "peerDependencies": {
+        "worker-loader": "^3.0.8"
+      },
+      "peerDependenciesMeta": {
+        "worker-loader": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -14886,6 +14919,14 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -19777,6 +19818,11 @@
         "domelementtype": "^2.3.0"
       }
     },
+    "dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
+    },
     "dompurify": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
@@ -26183,12 +26229,10 @@
       "integrity": "sha512-jnwYXe5yZcW+26VzLX3Pvo9kt+yWZMEk7P5SFgJ+KT7q2cVPZn3XQGpjQ+19FsD6VWO4BHpEx64kslTOMuZSOw=="
     },
     "vue-pdf-embed": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-2.1.2.tgz",
-      "integrity": "sha512-/j++oknFBY9x/MgEFBo9tSuOXS0Z9COlywwLhMREhiGfmuQqpnGy5T+SwVIXxR1tmdzM/lHog8JL7HOAgXT1aw==",
-      "requires": {
-        "pdfjs-dist": "^4.10.38"
-      }
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-1.2.1.tgz",
+      "integrity": "sha512-4uUm4wxaEGT9cS1cyuagAmMJjBxfQXWG1MvdGPesD3CiXhhSp4i0VMUCYwhFXtZ5+QqWv4mXbfLJ29Wpt+Qcuw==",
+      "requires": {}
     },
     "vue-qrcode-reader": {
       "version": "5.5.3",
@@ -26207,6 +26251,26 @@
         "@vue/devtools-api": "^6.5.1"
       }
     },
+    "vue3-pdfjs": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/vue3-pdfjs/-/vue3-pdfjs-0.1.6.tgz",
+      "integrity": "sha512-7UaWbsp8wNqB0y/rRlyo5yRb0S+XOkkSpmdUuS267Dhi07Pt4RFEetQ8inrpf/aTFJwGnW0Uc/UE4p376s+Zmw==",
+      "requires": {
+        "pdfjs-dist": "^2.10.377",
+        "vue": "^3.2.19"
+      },
+      "dependencies": {
+        "pdfjs-dist": {
+          "version": "2.16.105",
+          "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz",
+          "integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==",
+          "requires": {
+            "dommatrix": "^1.0.3",
+            "web-streams-polyfill": "^3.2.1"
+          }
+        }
+      }
+    },
     "w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -26235,6 +26299,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="
+    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index 297d12b..50eb9c3 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,10 @@
     "vue-dompurify-html": "^5.0.1",
     "vue-i18n": "^9.9.1",
     "vue-pdf": "^1.0.0",
-    "vue-pdf-embed": "^2.0.3",
+    "vue-pdf-embed": "^1.2.1",
     "vue-qrcode-reader": "^5.5.3",
     "vue-router": "^4.3.0",
+    "vue3-pdfjs": "^0.1.6",
     "weixin-js-sdk": "^1.6.5"
   },
   "devDependencies": {
diff --git a/src/views/enforce/enforceNoticeDetail.vue b/src/views/enforce/enforceNoticeDetail.vue
index 94a23a5..f1ef947 100644
--- a/src/views/enforce/enforceNoticeDetail.vue
+++ b/src/views/enforce/enforceNoticeDetail.vue
@@ -10,22 +10,41 @@
               <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
             </div>
             <div class="zoom">
-              <img
-                  v-for="(ite, index) in data.images"
-                  class="img"
-                  :src="ite"
-                  alt="预览图片"
-                  @click="imagePreview(index)"
-                  :key="index"
-              />
-              <van-image-preview
-                  v-model:show="data.show"
-                  :images="data.imageList"
-                  @change="onChange"
-                  ref="imagePre"
-              >
-                <template v-slot:index>第{{ indexImg + 1 }}页</template>
-              </van-image-preview>
+
+              <div  v-for="(ite, index) in data.images" >
+<!--                <img alt="预览文件" :src="ite" @click="handleViewPdf(ite)"/>-->
+<!--                <van-uploader @click="handleViewPdf(ite)" title="pdf预览"  v-model="data.fileList"/>-->
+                <van-icon @click="handleViewPdf(ite)" name="newspaper-o"  title="pdf预览" size="50"></van-icon>{{data.imagesName[index]}}
+              </div>
+              <!-- pdf预览 -->
+              <van-popup v-model:show="pdfOpen" title="'pdf预览'" style="width:80%" >
+                <div  style="min-height: 439px" >
+                  <vue-pdf-embed ref="pdfRef" v-if="!pdfFail" :source="pdfSrc"  @rendered="handleDocumentRender" @loading-failed="handlePdfFaid" />
+                </div>
+
+                <a :href="data.pdfSource" class="loadPdf" target="_blank">
+                  <van-button type="primary" icon="Download" plain>下载</van-button>
+                </a>
+                <van-button @click="pdfOpen = false" type="primary"  class="closePdf">关 闭</van-button>
+
+                </van-popup>
+
+                <!--              <img-->
+<!--                  v-for="(ite, index) in data.images"-->
+<!--                  class="img"-->
+<!--                  :src="ite"-->
+<!--                  alt="预览图片"-->
+<!--                  @click="imagePreview(index)"-->
+<!--                  :key="index"-->
+<!--              />-->
+<!--              <van-image-preview-->
+<!--                  v-model:show="data.show"-->
+<!--                  :images="data.imageList"-->
+<!--                  @change="onChange"-->
+<!--                  ref="imagePre"-->
+<!--              >-->
+<!--                <template v-slot:index>第{{ indexImg + 1 }}页</template>-->
+<!--              </van-image-preview>-->
             </div>
           </div>
 
@@ -34,6 +53,7 @@
 </template>
 
 <script setup name="register">
+import VuePdfEmbed from "vue-pdf-embed";
 import {showSuccessToast, showImagePreview} from "vant";
 import {
   queryEnforcementRegistrationById,
@@ -80,6 +100,7 @@ const data = reactive({
   objectType: "",
   createTime: "",
   images: "",
+  imagesName:"",
 });
 //保存参数
 const submitData = reactive({
@@ -135,6 +156,31 @@ const submitData = reactive({
   problem5: 0,
 });
 
+const pdfOpen = ref(false);
+const isLoading = ref(true);
+const pdfSrc = ref('');
+const pdfFail = ref(false);
+
+// pdf加载
+function handleDocumentRender(val) {
+  isLoading.value = false;
+  pdfFail.value = false;
+}
+// pdf加载失败，或者404
+function handlePdfFaid(val) {
+  isLoading.value = false;
+  pdfFail.value = true;
+  console.log('文档加载失败');
+}
+// 点击 预览
+function handleViewPdf(file) {
+  isLoading.value = true;
+  pdfOpen.value = true;
+  // pdfSrc.value = file;
+  pdfSrc.value = file;
+  pdfFail.value = false;
+}
+
 const tapGood = () => {
   data.good = "#7FFFD4";
   data.bad = "#D3D3D3";
@@ -303,15 +349,21 @@ const convertReg = (regs) => {
       (success) => {
         if (success.data.filePreview != null) {
           let images = [];
+          let imagesName = [];
           for (const key in success.data.filePreview.fileList) {
             images[key] = baseUrl + success.data.filePreview.fileList[key];
             data.imageList.push(
                 baseUrl + success.data.filePreview.fileList[key]
             );
           }
+          for (const key in success.data.filePreview.previewRespDTOS) {
+            imagesName[key] = success.data.filePreview.previewRespDTOS[key].caption;
+          }
+          data.imagesName = imagesName;
           data.images = images;
         }
 
+
         console.log(data.imageList);
       },
       (error) => {
@@ -405,6 +457,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
+.loadPdf {
+  position: absolute;
+  top: 6px;
+  right: 22%;
+}
+.closePdf {
+  position: absolute;
+  top: 6px;
+  right: 0.5%;
+}
 .address_edit {
   display: flex;
   flex-direction: column;
diff --git a/src/views/enterprise/systemNoticeDetail.vue b/src/views/enterprise/systemNoticeDetail.vue
index 48eb159..dd1da1d 100644
--- a/src/views/enterprise/systemNoticeDetail.vue
+++ b/src/views/enterprise/systemNoticeDetail.vue
@@ -10,22 +10,39 @@
               <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
             </div>
             <div class="zoom">
-              <img
-                  v-for="(ite, index) in data.images"
-                  class="img"
-                  :src="ite"
-                  alt="预览图片"
-                  @click="imagePreview(index)"
-                  :key="index"
-              />
-              <van-image-preview
-                  v-model:show="data.show"
-                  :images="data.imageList"
-                  @change="onChange"
-                  ref="imagePre"
-              >
-                <template v-slot:index>第{{ indexImg + 1 }}页</template>
-              </van-image-preview>
+              <div  v-for="(ite, index) in data.images" >
+                <!--                <img alt="预览文件" :src="ite" @click="handleViewPdf(ite)"/>-->
+                <!--                <van-uploader @click="handleViewPdf(ite)" title="pdf预览"  v-model="data.fileList"/>-->
+                <van-icon @click="handleViewPdf(ite)" name="newspaper-o"  title="pdf预览" size="50"></van-icon>{{data.imagesName[index]}}
+              </div>
+              <!-- pdf预览 -->
+              <van-popup v-model:show="pdfOpen" title="'pdf预览'" style="width:80%" >
+                <div  style="min-height: 439px" >
+                  <vue-pdf-embed ref="pdfRef" v-if="!pdfFail" :source="pdfSrc"  @rendered="handleDocumentRender" @loading-failed="handlePdfFaid" />
+                </div>
+
+                <a :href="data.pdfSource" class="loadPdf" target="_blank">
+                  <van-button type="primary" icon="Download" plain>下载</van-button>
+                </a>
+                <van-button @click="pdfOpen = false" type="primary"  class="closePdf">关 闭</van-button>
+
+              </van-popup>
+<!--              <img-->
+<!--                  v-for="(ite, index) in data.images"-->
+<!--                  class="img"-->
+<!--                  :src="ite"-->
+<!--                  alt="预览图片"-->
+<!--                  @click="imagePreview(index)"-->
+<!--                  :key="index"-->
+<!--              />-->
+<!--              <van-image-preview-->
+<!--                  v-model:show="data.show"-->
+<!--                  :images="data.imageList"-->
+<!--                  @change="onChange"-->
+<!--                  ref="imagePre"-->
+<!--              >-->
+<!--                <template v-slot:index>第{{ indexImg + 1 }}页</template>-->
+<!--              </van-image-preview>-->
             </div>
           </div>
 
@@ -46,6 +63,7 @@ import {queryLinkageById} from "@/api/linkage";
 
 
 import {baseUrl} from "@/config/env";
+import VuePdfEmbed from "vue-pdf-embed";
 //用户筛选弹窗
 // import Popup from './userFilter.vue';
 
@@ -80,6 +98,7 @@ const data = reactive({
   objectType: "",
   createTime: "",
   images: "",
+  imagesName:"",
 });
 //保存参数
 const submitData = reactive({
@@ -134,7 +153,30 @@ const submitData = reactive({
   problem4: 0,
   problem5: 0,
 });
-
+const pdfOpen = ref(false);
+const isLoading = ref(true);
+const pdfSrc = ref('');
+const pdfFail = ref(false);
+
+// pdf加载
+function handleDocumentRender(val) {
+  isLoading.value = false;
+  pdfFail.value = false;
+}
+// pdf加载失败，或者404
+function handlePdfFaid(val) {
+  isLoading.value = false;
+  pdfFail.value = true;
+  console.log('文档加载失败');
+}
+// 点击 预览
+function handleViewPdf(file) {
+  isLoading.value = true;
+  pdfOpen.value = true;
+  // pdfSrc.value = file;
+  pdfSrc.value = file;
+  pdfFail.value = false;
+}
 const tapGood = () => {
   data.good = "#7FFFD4";
   data.bad = "#D3D3D3";
@@ -303,12 +345,17 @@ const convertReg = (regs) => {
       (success) => {
         if (success.data.filePreview != null) {
           let images = [];
+          let imagesName = [];
           for (const key in success.data.filePreview.fileList) {
             images[key] = baseUrl + success.data.filePreview.fileList[key];
             data.imageList.push(
                 baseUrl + success.data.filePreview.fileList[key]
             );
           }
+          for (const key in success.data.filePreview.previewRespDTOS) {
+            imagesName[key] = success.data.filePreview.previewRespDTOS[key].caption;
+          }
+          data.imagesName = imagesName;
           data.images = images;
         }
 
@@ -405,6 +452,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
+.loadPdf {
+  position: absolute;
+  top: 6px;
+  right: 22%;
+}
+.closePdf {
+  position: absolute;
+  top: 6px;
+  right: 0.5%;
+}
 .address_edit {
   display: flex;
   flex-direction: column;