init repo

package.json

@@ -1,10 +1,12 @@
 {
-  "name": "test-table",
+  "name": "@ilzf/pdf-vue3",
   "version": "0.0.1",
   "packageManager": "[email protected]",
   "scripts": {
     "dev": "vite --host",
-    "build": "vite build"
+    "build": "vite build",
+    "build:lib": "vite build && npm pack",
+    "lib": "npm pack"
   },
   "dependencies": {
     "lodash": "^4.17.21",
@@ -15,16 +17,16 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.36.0",
     "@types/node": "^18.15.11",
+    "@types/lodash": "^4.14.194",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/compiler-sfc": "^3.0.4",
     "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-prettier": "^4.2.1",
     "typescript": "^4.9.3",
     "prettier": "^2.8.5",
-    "vite": "^4.1.0",
+    "vite": "4.1.0-beta.0",
     "less": "^4.1.3",
     "vite-plugin-dts": "^2.3.0"
-
   }
 }

src/App.vue

@@ -1,7 +1,23 @@
 <template>
-  <HelloWorld></HelloWorld>
+  <div style="width: 100%; height: 98vh">
+    <PDFViewer ref="viewRef" v-bind="props"></PDFViewer>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import HelloWorld from '@/components/HelloWorld.vue';
+  import usePDFViewer from '@/hooks/usePDFViewer';
+  import PDFViewer from '@/PDFViewer.vue';
+
+  const [viewRef, props, methods] = usePDFViewer({
+    src: 'http://192.168.0.220:7000/power-file/download/1683316289011527682?type=byteStream&access_token=1084540c-b5ef-4a89-806e-e1f1ebe97ce9',
+    onLoaded: () => {
+      console.log('loaded');
+    },
+    onScroll: () => {
+      console.log('scroll');
+    },
+    onEnded: () => {
+      console.log('ended');
+    },
+  });
 </script>

src/PDFViewer.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="pdf-container">
+    <div class="pdf-header">
+      <Header
+        v-model:expand="isExpandAside"
+        :current-page="currentPage"
+        :total-page="totalPage"
+        @change-current-page="setCurrentPage"
+      ></Header>
+    </div>
+    <div class="pdf-bottom" :class="isExpandAsideClass ? ['pdf-expand'] : ['un-expand']">
+      <ProgressBar :progress="progress"></ProgressBar>
+      <div class="pdf-aside">
+        <Sidebar
+          :current-page="currentPage"
+          :page-s="pageS"
+          :is-page-s-down="isPageSDown"
+          :outlines="outlines"
+          @update:current-page="setCurrentPage"
+        ></Sidebar>
+      </div>
+      <div class="pdf-main">
+        <div ref="scrollRef" class="pdf-viewer-container">
+          <div v-for="(item, index) in contains" :key="index" class="current-pdf-page-container">
+            <div :ref="item" style="position: relative"></div>
+            <div style="position: absolute; bottom: 2px">{{ index + 1 }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import usePDFJs from '@/hooks/usePDFJs';
+  import ProgressBar from '@/components/ProgressBar.vue';
+  import Sidebar from '@/components/Sidebar.vue';
+  import Header from '@/components/Header.vue';
+  import usePDFState from '@/hooks/usePDFState';
+  import { PDFViewerEmits } from '@/const/emits';
+  const props = defineProps({ src: String, gap: { type: Number, default: 6 }, lang: Object });
+  const emits = defineEmits([...PDFViewerEmits]);
+  const {
+    contains,
+    scrollRef,
+    currentPage,
+    totalPage,
+    progress,
+    setCurrentPage,
+    pageS,
+    isPageSDown,
+    outlines,
+    document,
+  } = usePDFJs(props as any, emits);
+  provide('document', document);
+  provide('powerLang', props?.lang);
+
+  const { gap, isExpandAside, asideWidth, asideMinWidth, isExpandAsideClass } = usePDFState(
+    props as any
+  );
+  defineExpose({
+    setCurrentPage,
+    getCurrentPage: () => currentPage.value,
+    getTotal: () => totalPage.value,
+  });
+</script>
+
+<style scoped lang="less">
+  @import './style/viewer';
+  .pdf-container {
+    --pdf-aside-width: v-bind(asideWidth);
+    --pdf-aside-min-width: v-bind(asideMinWidth);
+    --pdf-head-height: 4%;
+    --pdf-render-gap: v-bind(gap);
+  }
+</style>

src/components/Header.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="pdf-header-container">
+    <div class="header-left">
+      <div class="icon-container" @click="emits('update:expand', !expand)">
+        <PDFIcons :width="24" :height="24" type="sidebar"></PDFIcons>
+      </div>
+    </div>
+    <div class="header-mid">
+      <span>
+        <input ref="inputRef" :value="currentPage" @blur="handlerInputBlur" /> /
+        {{ totalPage }}
+      </span>
+    </div>
+    <div class="header-right"></div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import PDFIcons from '@/components/PDFIcons.vue';
+
+  defineProps({ currentPage: Number, totalPage: Number, expand: Boolean });
+  const emits = defineEmits(['update:expand', 'changeCurrentPage']);
+  const inputRef = ref();
+  const handlerInputBlur = () => {
+    emits('changeCurrentPage', +inputRef.value.value);
+  };
+</script>
+
+<style scoped lang="less">
+  @import '../style/header';
+</style>

src/components/OutLineItem.vue

@@ -0,0 +1,69 @@
+<template>
+  <div v-for="(item, index) in outlines" :key="index" class="item-container">
+    <div class="item-outline-icons" @click="handlerIconClick">
+      <PDFIcons
+        v-if="item.items.length > 0 && !isExpand"
+        type="arrowRight"
+        :width="18"
+        :height="18"
+      ></PDFIcons>
+      <PDFIcons
+        v-else-if="item.items.length > 0 && isExpand"
+        type="arrowDown"
+        :width="18"
+        :height="18"
+      ></PDFIcons>
+      <div v-else style="width: 18px; height: 18px" @click.stop.prevent="() => 1"></div>
+    </div>
+    <div class="item-title">
+      <span @click="handlerTitleClick(item)">{{ item.title }}</span>
+      <div :class="isExpand ? [] : ['unExpand']">
+        <out-line-item :outlines="item.items" @go-page="emits('goPage', $event)"></out-line-item>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import type { PropType, Ref } from 'vue';
+  import { inject, ref } from 'vue';
+  import type { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
+  import PDFIcons from '@/components/PDFIcons.vue';
+  import type { OutlineType } from '@/type';
+  defineProps({ outlines: Array as PropType<OutlineType[]> });
+  const emits = defineEmits(['goPage']);
+  const isExpand = ref(false);
+  const handlerIconClick = () => {
+    isExpand.value = !isExpand.value;
+  };
+  const document: Ref<PDFDocumentProxy> = inject('document');
+  const handlerTitleClick = async (item: OutlineType) => {
+    if (item?.dest?.length > 0) {
+      const index = await document.value.getPageIndex(item.dest[0]);
+      emits('goPage', index + 1);
+    }
+  };
+</script>
+
+<style scoped lang="less">
+  @import '../style/values';
+  .item-container {
+    display: flex;
+    box-sizing: border-box;
+    padding: 2px 0;
+    .item-outline-icons {
+      cursor: pointer;
+    }
+    .unExpand {
+      display: none;
+    }
+    .item-title {
+      font-size: 14px;
+      span {
+        cursor: pointer;
+        &:hover {
+          background-color: @icon-active-color;
+        }
+      }
+    }
+  }
+</style>