@toolspack/ttd-pdfjs 0.0.0 → 0.0.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "private": false,
-  "main": "src/packages/index.js",
+  "main": "lib/ttd-pdfjs.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -14,17 +14,20 @@
     "babel-laoder": "0.0.1-security",
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.14",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
-    "pdfjs-dist": "2.16.105",
+    "pdfjs-dist": "3.11.174",
     "vue": "^2.6.12"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.11",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
     "babel-preset-es2015": "^6.24.1",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.22.1",

package/src/App.vue

@@ -1,11 +1,26 @@
 <template>
   <div id="app">
-    <form id="myForm" @submit.prevent="uploadFile">
-      <label for="">请上传：</label>
-      <input type="file" ref="fileInput" multiple name="files"><br>
-      <input type="hidden" name="bucketName" :value="uName">
-      <input type="submit" value="提交">
-    </form>
+    <!-- <el-upload
+    ref="baseUpload"
+    :show-file-list="false"
+    :accept="accept"
+    name="files"
+    :action="actionInner"
+    :on-success="handleAvatarSuccess"
+    :on-progress="handelProgress"
+    :before-upload="beforeAvatarUpload"
+    :headers="uploadHeader()"
+    :data="uploadData"
+    :on-exceed="onExceed"
+    :disabled="disabled"
+    list-type="text"
+    :multiple="multiple"
+    :limit="limit"
+  >
+    <template slot="trigger">
+      <slot></slot>
+    </template>
+  </el-upload> -->
   <PdfView :pdfurl="url" />
   </div>
 </template>
@@ -20,7 +35,7 @@ export default {
   name: 'App',
   data() {
     return {
-      url: 'https://petx.totodi.com/visit/totodi-contract/20230905-e777d0d33a6f440db4b5276b397121fd-无法翻页-40.pdf?expireDataTime=1693900521328',
+      url: 'https://petx.totodi.com/visit/totodi-contract/20231218-d5c012c049fd4dfabd974d24a5304166-无法显示--风险揭示书.pdf?expireDataTime=1702871246572',
       uName: 'totodi-contract',
       action: `${_baseUrl}zuul/file-service/oos/uploadFile`,
     }

package/src/main.js

@@ -1,8 +1,12 @@
 import Vue from 'vue';
+import { Button, Input } from 'element-ui';
 import App from './App.vue';
 
 Vue.config.productionTip = false;
 
+Vue.component(Button.name, Button);
+Vue.component(Input.name, Input);
+
 new Vue({
   render: (h) => h(App),
 }).$mount('#app');

package/src/packages/pdfjs/PdfView216.vue

@@ -26,13 +26,16 @@
 </template>
 <script>
 
+import SwitchPage from './SwitchPage.vue'
+
 const PDFJS = require('pdfjs-dist')
 
 const defautScale = 1.0
 
-PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/legacy/build/pdf.worker.entry')
+PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.js')
 
 export default {
+  components: { SwitchPage },
   props: {
     pdfurl: {
       default: '',

package/src/packages/pdfjs/SwitchPage.vue

@@ -0,0 +1,79 @@
+<template lang="html">
+  <div class="switch-page">
+    <el-button size="mini" @click="switchPage('prev')"><i class="el-icon-caret-left"></i></el-button>
+    <el-button size="mini" @click="switchPage('next')"><i class="el-icon-caret-right"></i></el-button>
+    <span style="margin-left: 10px;">{{page}}/{{numPages}}</span>
+    <span style="margin-left: 6px">
+      跳转至
+      <el-input v-model.number="itemPage" style="width: 50px;margin: 0 4px" size="mini" @keyup.native.enter="goPage"></el-input>
+      页
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'switch-page',
+  props: {
+    numPages: {
+      type: [Number, String],
+    },
+  },
+  data() {
+    return {
+      page: 1,
+      itemPage: '',
+    }
+  },
+  watch: {
+    numPages() {
+      this.page = 1
+      this.itemPage = ''
+    },
+  },
+  methods: {
+    switchPage(str) {
+      if (str === 'prev') {
+        if (this.page === 1) {
+          return
+        }
+        this.page--
+      }
+      if (str === 'next') {
+        if (this.page === this.numPages) {
+          this.$message({ message: '当前已是最后一页', type: 'warning' })
+          return
+        }
+        this.page++
+      }
+      this.$emit('page', this.page)
+    },
+    setPage(page = 1) {
+      this.page = page
+    },
+    goPage() {
+      if (this.itemPage > 0) {
+        if (this.itemPage >= this.numPages) {
+          this.page = this.numPages
+          this.itemPage = this.page
+        } else {
+          this.page = this.itemPage
+        }
+        this.$emit('page', this.page)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.switch-page {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+.switch-page button {
+  font-size: 16px;
+  padding: 6px !important;
+}
+</style>