pdf预览

1 year ago · 1a412e508a
4 changed files with 239 additions and 48 deletions
--- 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",
--- 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": {
--- 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;
--- 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;