feat(projects): add plugin pdf preview

package.json

@@ -74,6 +74,7 @@
     "vue": "3.4.33",
     "vue-draggable-plus": "0.5.2",
     "vue-i18n": "9.13.1",
+    "vue-pdf-embed": "2.0.4",
     "vue-router": "4.4.0",
     "wangeditor": "4.7.15",
     "xgplayer": "3.0.19",

src/locales/langs/en-us.ts

@@ -199,7 +199,8 @@ const local: App.I18n.Schema = {
     plugin_video: 'Video',
     plugin_barcode: 'Barcode',
     plugin_pinyin: 'pinyin',
-    plugin_excel: 'Excel'
+    plugin_excel: 'Excel',
+    plugin_pdf: 'PDF preview'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -199,7 +199,8 @@ const local: App.I18n.Schema = {
     plugin_video: '视频',
     plugin_barcode: '条形码',
     plugin_pinyin: '拼音',
-    plugin_excel: 'Excel'
+    plugin_excel: 'Excel',
+    plugin_pdf: 'PDF 预览'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -44,6 +44,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   plugin_excel: () => import("@/views/plugin/excel/index.vue"),
   plugin_icon: () => import("@/views/plugin/icon/index.vue"),
   plugin_map: () => import("@/views/plugin/map/index.vue"),
+  plugin_pdf: () => import("@/views/plugin/pdf/index.vue"),
   plugin_pinyin: () => import("@/views/plugin/pinyin/index.vue"),
   plugin_print: () => import("@/views/plugin/print/index.vue"),
   plugin_swiper: () => import("@/views/plugin/swiper/index.vue"),

src/router/elegant/routes.ts

@@ -444,6 +444,16 @@ export const generatedRoutes: GeneratedRoute[] = [
           icon: 'mdi:map'
         }
       },
+      {
+        name: 'plugin_pdf',
+        path: '/plugin/pdf',
+        component: 'view.plugin_pdf',
+        meta: {
+          title: 'plugin_pdf',
+          i18nKey: 'route.plugin_pdf',
+          icon:'uiw:file-pdf'
+        }
+      },
       {
         name: 'plugin_pinyin',
         path: '/plugin/pinyin',

src/router/elegant/transform.ts

@@ -212,6 +212,7 @@ const routeMap: RouteMap = {
   "plugin_excel": "/plugin/excel",
   "plugin_icon": "/plugin/icon",
   "plugin_map": "/plugin/map",
+  "plugin_pdf": "/plugin/pdf",
   "plugin_pinyin": "/plugin/pinyin",
   "plugin_print": "/plugin/print",
   "plugin_swiper": "/plugin/swiper",

src/typings/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    'IconCharm:download': typeof import('~icons/charm/download')['default']
     'IconFileIcons:microsoftExcel': typeof import('~icons/file-icons/microsoft-excel')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
@@ -32,6 +33,8 @@ declare module 'vue' {
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     IconLocalCast: typeof import('~icons/local/cast')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
+    'IconMaterialSymbolsLight:rotate90DegreesCcwOutlineRounded': typeof import('~icons/material-symbols-light/rotate90-degrees-ccw-outline-rounded')['default']
+    'IconMdi:printer': typeof import('~icons/mdi/printer')['default']
     IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
     IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
     IconMdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -61,6 +64,7 @@ declare module 'vue' {
     NDropdown: typeof import('naive-ui')['NDropdown']
     NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
+    NFlex: typeof import('naive-ui')['NFlex']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
@@ -77,12 +81,14 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPagination: typeof import('naive-ui')['NPagination']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
+    NSkeleton: typeof import('naive-ui')['NSkeleton']
     NSpace: typeof import('naive-ui')['NSpace']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']

src/typings/elegant-router.d.ts

@@ -68,6 +68,7 @@ declare module "@elegant-router/types" {
     "plugin_excel": "/plugin/excel";
     "plugin_icon": "/plugin/icon";
     "plugin_map": "/plugin/map";
+    "plugin_pdf": "/plugin/pdf";
     "plugin_pinyin": "/plugin/pinyin";
     "plugin_print": "/plugin/print";
     "plugin_swiper": "/plugin/swiper";
@@ -175,6 +176,7 @@ declare module "@elegant-router/types" {
     | "plugin_excel"
     | "plugin_icon"
     | "plugin_map"
+    | "plugin_pdf"
     | "plugin_pinyin"
     | "plugin_print"
     | "plugin_swiper"

src/views/plugin/pdf/index.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import VuePdfEmbed from 'vue-pdf-embed';
+import { ref } from 'vue';
+import type { ShallowRef } from 'vue';
+import type { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
+import { useLoading } from '@sa/hooks';
+
+interface PDFProps {
+  doc: ShallowRef<PDFDocumentProxy | null>;
+  download: (filename: string) => Promise<void>;
+  print: (dpi?: number, filename?: string, allPages?: boolean) => Promise<void>;
+}
+
+const rotations = [0, 90, 180, 270];
+
+const source =
+  'https://xiaoxian521.github.io/hyperlink/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf';
+
+const { loading, endLoading } = useLoading(true);
+
+const currentRotation = ref(0);
+
+const pdfRef = ref<PDFProps | null>(null);
+
+const currentPage = ref<undefined | number>(1);
+
+const pageCount = ref(1);
+
+const showAllPages = ref(false);
+
+function handleDocumentRender() {
+  endLoading();
+  if (pdfRef.value?.doc) pageCount.value = pdfRef.value.doc.numPages;
+}
+
+function rotate() {
+  currentRotation.value = (currentRotation.value + 1) % 4;
+}
+
+function handlePrint() {
+  pdfRef.value?.print(undefined, 'test.pdf', true);
+}
+
+function showAllPagesChange() {
+  currentPage.value = showAllPages.value ? undefined : 1;
+}
+
+function handleDownload() {
+  pdfRef.value?.download('test.pdf');
+}
+</script>
+
+<template>
+  <div>
+    <NCard title="PDF 预览" content-class="flex-col-stretch" :bordered="false" class="h-full card-wrapper">
+      <NSpace :vertical="true">
+        <GithubLink link="https://github.com/hrynko/vue-pdf-embed" />
+        <WebSiteLink label="文档地址：" link="https://www.npmjs.com/package/vue-pdf-embed" />
+        <NFlex justify="end">
+          <NSpace align="center">
+            <NCheckbox v-model:checked="showAllPages" @update:checked="showAllPagesChange">显示所有页面</NCheckbox>
+            <ButtonIcon tooltip-content="旋转90度" @click="rotate">
+              <icon-material-symbols-light:rotate-90-degrees-ccw-outline-rounded />
+            </ButtonIcon>
+
+            <ButtonIcon tooltip-content="打印" @click="handlePrint">
+              <icon-mdi:printer />
+            </ButtonIcon>
+
+            <ButtonIcon tooltip-content="下载" @click="handleDownload">
+              <icon-charm:download />
+            </ButtonIcon>
+          </NSpace>
+        </NFlex>
+      </NSpace>
+
+      <NScrollbar class="my-8px flex-grow flex-basis-0 overflow-hidden">
+        <NSkeleton v-if="loading" size="small" class="mt-12px" text :repeat="12" />
+
+        <VuePdfEmbed
+          ref="pdfRef"
+          class="overflow-auto container"
+          :class="{ 'h-0': loading }"
+          :rotation="rotations[currentRotation]"
+          :page="currentPage"
+          :source="source"
+          @rendered="handleDocumentRender"
+        />
+      </NScrollbar>
+
+      <div class="flex items-center justify-between">
+        <div v-if="showAllPages" class="text-18px font-medium">共{{ pageCount }}页</div>
+        <NPagination v-else v-model:page="currentPage" :page-count="pageCount" :page-size="1" />
+      </div>
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>