feat: add pdf preview demo (#282)

* feat: add pdf preview demo

locales/en.yaml

@@ -83,5 +83,6 @@ menus:
   hsCascader: Area Cascader
   hsSwiper: Swiper Plugin
   hsVirtualList: Virtual List
+  hsPdf: PDF Preview
 status:
   hsLoad: Loading...

locales/zh-CN.yaml

@@ -83,5 +83,6 @@ menus:
   hsCascader: 区域级联选择器
   hsSwiper: Swiper插件
   hsVirtualList: 虚拟列表
+  hsPdf: PDF预览
 status:
   hsLoad: 加载中...

package.json

@@ -68,6 +68,7 @@
     "vue-form-create2": "^1.2.8",
     "vue-i18n": "^9.2.0-beta.35",
     "vue-json-pretty": "^2.0.2",
+    "vue-pdf-embed": "^1.1.2",
     "vue-router": "^4.0.15",
     "vue-types": "^4.1.1",
     "vue-virtual-scroller": "^2.0.0-alpha.1",

pnpm-lock.yaml

@@ -105,6 +105,7 @@ specifiers:
   vue-form-create2: ^1.2.8
   vue-i18n: ^9.2.0-beta.35
   vue-json-pretty: ^2.0.2
+  vue-pdf-embed: ^1.1.2
   vue-router: ^4.0.15
   vue-types: ^4.1.1
   vue-virtual-scroller: ^2.0.0-alpha.1
@@ -155,6 +156,7 @@ dependencies:
   vue-form-create2: 1.2.9
   vue-i18n: 9.2.0-beta.35_vue@3.2.35
   vue-json-pretty: 2.0.6_vue@3.2.35
+  vue-pdf-embed: 1.1.2_vue@3.2.35
   vue-router: 4.0.15_vue@3.2.35
   vue-types: 4.1.1_vue@3.2.35
   vue-virtual-scroller: 2.0.0-alpha.1_vue@3.2.35
@@ -2173,10 +2175,6 @@ packages:
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
       eslint-plugin-vue: ^8.0.1
-      typescript: "*"
-    peerDependenciesMeta:
-      typescript:
-        optional: true
     dependencies:
       "@typescript-eslint/eslint-plugin": 5.23.0_17b6d2ce7129f0b36f2c30ae592c16e7
       "@typescript-eslint/parser": 5.23.0_eslint@8.15.0+typescript@4.6.4
@@ -2186,6 +2184,7 @@ packages:
       vue-eslint-parser: 8.3.0_eslint@8.15.0
     transitivePeerDependencies:
       - supports-color
+      - typescript
     dev: true
 
   /@vue/reactivity-transform/3.2.33:
@@ -3280,8 +3279,6 @@ packages:
       finalhandler: 1.1.2
       parseurl: 1.3.3
       utils-merge: 1.0.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /consola/2.15.3:
@@ -3412,8 +3409,6 @@ packages:
       color: 0.11.4
       debug: 3.2.7
       rgb: 0.1.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /css-declaration-sorter/6.2.2_postcss@8.4.13:
@@ -3628,11 +3623,6 @@ packages:
       {
         integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
       }
-    peerDependencies:
-      supports-color: "*"
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.0.0
     dev: true
@@ -3642,11 +3632,6 @@ packages:
       {
         integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
       }
-    peerDependencies:
-      supports-color: "*"
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.3
     dev: false
@@ -4784,8 +4769,6 @@ packages:
       parseurl: 1.3.3
       statuses: 1.5.0
       unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /find-up/4.1.0:
@@ -8645,6 +8628,17 @@ packages:
       vue: 3.2.35
     dev: false
 
+  /vue-pdf-embed/1.1.2_vue@3.2.35:
+    resolution:
+      {
+        integrity: sha512-puXchZBqS3I/h+rPmqDYxMfE+UKtpOk2aRtGcl/BOgexNEPAggt1AghNOl8bmI/NY6M1+dS7YClQvWMvb9DJCA==
+      }
+    peerDependencies:
+      vue: ^2.x || ^3.x
+    dependencies:
+      vue: 3.2.35
+    dev: false
+
   /vue-resize/2.0.0-alpha.1_vue@3.2.35:
     resolution:
       {

src/router/modules/able.ts

@@ -130,6 +130,14 @@ const ableRouter = {
       meta: {
         title: $t("menus.hsVirtualList")
       }
+    },
+    {
+      path: "/able/pdf",
+      name: "Pdf",
+      component: () => import("/@/views/able/pdf.vue"),
+      meta: {
+        title: $t("menus.hsPdf")
+      }
     }
   ]
 };

src/views/able/pdf.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import VuePdfEmbed from "vue-pdf-embed";
+
+defineOptions({
+  name: "Pdf"
+});
+
+const { t } = useI18n();
+
+const source =
+  "https://pure-admin-doc.vercel.app/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
+const pdfRef = ref();
+let loading = ref(true);
+let showAllPages = ref(false);
+let pageCount = ref(1);
+let currentPage = ref(1);
+
+const handleDocumentRender = () => {
+  loading.value = false;
+  pageCount.value = pdfRef.value.pageCount;
+};
+
+const showAllPagesChange = () => {
+  currentPage.value = showAllPages.value ? null : 1;
+};
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="font-medium">
+        PDF预览（
+        <el-link
+          href="https://github.com/hrynko/vue-pdf-embed"
+          target="_blank"
+          style="font-size: 16px; margin: 0 5px 4px 0"
+        >
+          github地址
+        </el-link>
+        ）
+      </div>
+    </template>
+    <div
+      class="h-[calc(100vh-239px)]"
+      v-loading="loading"
+      :element-loading-text="t('status.hsLoad')"
+    >
+      <div class="flex justify-between items-center h-9">
+        <div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
+          {{ pageCount }} page(s)
+        </div>
+        <div v-else>
+          <el-pagination
+            background
+            layout="prev, slot, next"
+            v-model:current-page="currentPage"
+            :page-size="1"
+            :total="pageCount"
+          >
+            {{ currentPage }} / {{ pageCount }}
+          </el-pagination>
+        </div>
+        <el-checkbox v-model="showAllPages" @change="showAllPagesChange">
+          Show all pages
+        </el-checkbox>
+      </div>
+      <el-scrollbar>
+        <vue-pdf-embed
+          class="h-full container overflow-auto"
+          ref="pdfRef"
+          :page="currentPage"
+          :source="source"
+          @rendered="handleDocumentRender"
+        />
+      </el-scrollbar>
+    </div>
+  </el-card>
+</template>