@toolspack/ttd-pdfjs 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "main": "lib/ttd-pdfjs.umd.min.js",
   "scripts": {
@@ -14,9 +14,10 @@
     "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": {
@@ -26,6 +27,7 @@
     "@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,20 @@
 <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"
+    name="files"
+    :action="actionInner"
+    :on-success="handleAvatarSuccess"
+    :on-progress="handelProgress"
+    :before-upload="beforeAvatarUpload"
+    :headers="uploadHeader"
+    :data="uploadData"
+    :on-exceed="onExceed"
+    list-type="text"
+  >
+     <el-button>上传</el-button>
+  </el-upload>
   <PdfView :pdfurl="url" />
   </div>
 </template>
@@ -13,32 +22,65 @@
 <script>
 import PdfView from './packages/pdfjs/PdfView216.vue'
 
-const _baseUrl = 'http://peys.totodi.com:37811/'
+const mybaseUrl = 'https://petx.totodi.com/'
 
 export default {
   components: { PdfView },
   name: 'App',
   data() {
     return {
-      url: 'https://petx.totodi.com/visit/totodi-contract/20230905-e777d0d33a6f440db4b5276b397121fd-无法翻页-40.pdf?expireDataTime=1693900521328',
+      maxSize: 10,
+      uploadData: { debug: true, bucketName: 'totodi-temp' },
+      actionInner: `${mybaseUrl}zuul/file-service/oos/uploadFile`,
+      uploadHeader: {},
+      url: 'https://petx.totodi.com/visit/totodi-contract/20231218-d5c012c049fd4dfabd974d24a5304166-无法显示--风险揭示书.pdf?expireDataTime=1702871246572',
       uName: 'totodi-contract',
-      action: `${_baseUrl}zuul/file-service/oos/uploadFile`,
     }
   },
   mounted() {
   },
   methods: {
-    uploadFile() {
-      const formData = new FormData();
-      const files = this.$refs.fileInput.files;
-
-      // 添加文件数据到表单中
-      for (let i = 0; i < files.length; i++) {
-        formData.append('files', files[i]);
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < this.maxSize
+      if (!isLt2M) {
+        console.log(`上传文件大小不能超过${ this.maxSize }MB!`)
+      }
+      if (isLt2M) {
+        this.progress = file
+      }
+      return isLt2M
+    },
+    onExceed(files, fileList) {
+      console.log(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    handelProgress(event, file, fileList) {
+      this.progressCurrent = event.percent
+      console.log('progress', event, file, fileList)
+    },
+    tips(words = []) {
+      if (Array.isArray(words) && words.length > 0) {
+        const cfile = [...words]
+        const lastType = cfile.length > 1 ? cfile.pop() : ''
+        return `仅支持 ${cfile.join('、')}${lastType ? ` 或者 ${ lastType}` : ''} 格式`
+      }
+      return '文件类型不正确'
+    },
+    handleAvatarSuccess(res, file, fileList) {
+      const { code, data, msg } = res
+      // this.progress = null
+      if (code === 0) {
+        const { list } = data
+        // let obj = {
+        //   fileName: file.fileName,
+        //   bucketName: file.oosBucket,
+        //   objectKey: file.objectKey,
+        //   url: file.url,
+        //   fileMD5: file.fileMD5
+        // }
+        this.url = list[0].url
+      } else {
+        console.log(msg || '上传失败!')
       }
-
-      // 添加其他字段数据到表单中
-      formData.append('u_name', this.uName);
     },
   },
 }

package/src/main.js

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

package/src/packages/pdfjs/PdfView216.vue

@@ -26,13 +26,19 @@
 </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')
+// https://unpkg.com/pdfjs-dist@2.16.105/cmaps/
+// 使用代理的cmaps，会导致加载很慢，改用本地
+const cMapUrl = '../podfjs-3.11.174/cmaps'
 
 export default {
+  components: { SwitchPage },
   props: {
     pdfurl: {
       default: '',
@@ -200,7 +206,7 @@ export default {
         // pdfDoc_ = await PDFJS.getDocument({ data: arrayBufferPdf }).promise;
         pdfDoc_ = await PDFJS.getDocument({
           url: encodeURI(url),
-          cMapUrl: 'https://unpkg.com/pdfjs-dist@2.16.105/cmaps/',
+          cMapUrl,
           cMapPacked: true,
         }).promise
       } catch (error) {

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>

package/src/packages/podfjs-3.11.174/cmaps/CNS2-V.bcmap

@@ -0,0 +1,3 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE�CNS2-H

package/src/packages/podfjs-3.11.174/cmaps/ETenms-B5-H.bcmap

@@ -0,0 +1,3 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE�	ETen-B5-H`
 ^

package/src/packages/podfjs-3.11.174/cmaps/GB-H.bcmap

@@ -0,0 +1,4 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE

!!��]aX!!]`�21�>	�p�z�$]��"R�d�-U�7�*�
+�"]�h�"]�F�"]�$�"]��"]�`�"]�>�"]��"]�z�"]�X�"]�6�"]��"]�r�"]�P�"]�.�"]��"]�j�"]�H�"]�&�"]��"]�b�"]�@�"]��"]�|�"]�Z�"]�8�"]��"]�t�"]�R�"]�0�"]��"]�l�"]�J�"]�(�"]��"]�d�"]�B�"]� �"X�~�']�W�"]�5�"]��"]�q�"]�O�"]�-�"]��"]�i�"]�G�"]�%�"]��"]�a�"]�?�"]��"]�{�"]�Y�"]�7�"]��"]�s�"]�Q�"]�/�"]�

package/src/packages/podfjs-3.11.174/cmaps/LICENSE

@@ -0,0 +1,36 @@
+%%Copyright: -----------------------------------------------------------
+%%Copyright: Copyright 1990-2009 Adobe Systems Incorporated.
+%%Copyright: All rights reserved.
+%%Copyright:
+%%Copyright: Redistribution and use in source and binary forms, with or
+%%Copyright: without modification, are permitted provided that the
+%%Copyright: following conditions are met:
+%%Copyright:
+%%Copyright: Redistributions of source code must retain the above
+%%Copyright: copyright notice, this list of conditions and the following
+%%Copyright: disclaimer.
+%%Copyright:
+%%Copyright: Redistributions in binary form must reproduce the above
+%%Copyright: copyright notice, this list of conditions and the following
+%%Copyright: disclaimer in the documentation and/or other materials
+%%Copyright: provided with the distribution. 
+%%Copyright:
+%%Copyright: Neither the name of Adobe Systems Incorporated nor the names
+%%Copyright: of its contributors may be used to endorse or promote
+%%Copyright: products derived from this software without specific prior
+%%Copyright: written permission. 
+%%Copyright:
+%%Copyright: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
+%%Copyright: CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+%%Copyright: INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+%%Copyright: MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+%%Copyright: DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+%%Copyright: CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+%%Copyright: SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
+%%Copyright: NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+%%Copyright: LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+%%Copyright: HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+%%Copyright: CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+%%Copyright: OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+%%Copyright: SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+%%Copyright: -----------------------------------------------------------