@toolspack/ttd-pdfjs 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "main": "lib/ttd-pdfjs.umd.min.js",
   "scripts": {

package/src/App.vue

@@ -1,26 +1,20 @@
 <template>
   <div id="app">
-    <!-- <el-upload
+     <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()"
+    :headers="uploadHeader"
     :data="uploadData"
     :on-exceed="onExceed"
-    :disabled="disabled"
     list-type="text"
-    :multiple="multiple"
-    :limit="limit"
   >
-    <template slot="trigger">
-      <slot></slot>
-    </template>
-  </el-upload> -->
+     <el-button>上传</el-button>
+  </el-upload>
   <PdfView :pdfurl="url" />
   </div>
 </template>
@@ -28,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/20231218-d5c012c049fd4dfabd974d24a5304166-无法显示--风险揭示书.pdf?expireDataTime=1702871246572',
+      maxSize: 10,
+      uploadData: { debug: true, bucketName: 'totodi-temp' },
+      actionInner: `${mybaseUrl}zuul/file-service/oos/uploadFile`,
+      uploadHeader: {},
+      url: '',
       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,11 +1,12 @@
 import Vue from 'vue';
-import { Button, Input } from 'element-ui';
+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),

package/src/packages/pdfjs/PdfView216.vue

@@ -33,6 +33,14 @@ const PDFJS = require('pdfjs-dist')
 const defautScale = 1.0
 
 PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.js')
+// https://unpkg.com/pdfjs-dist@2.16.105/cmaps/
+// 使用代理的cmaps，会导致加载很慢，改用本地
+
+const cMapUrl = 'https://wsp.totodi.com/staticfiles_web/web/pdfjs/cmaps/'
+
+// const cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/cmaps/'
+
+// const cMapUrl = 'https://petx.totodi.com/jz/pdfjs/cmaps'
 
 export default {
   components: { SwitchPage },
@@ -68,6 +76,7 @@ export default {
   data() {
     return {
       pdfDoc: null, // pdfjs 生成的对象
+      viewport: null,
       pageNum: 1, // 当前页数
       pageRendering: false,
       fileLoading: true,
@@ -106,6 +115,7 @@ export default {
         }
         // 重新渲染 缩放过的PDF
         viewport = page.getViewport({ scale: scaleNum })
+        this.viewport = viewport
 
         // 将 canvas 尺寸 传给父组件
         this.$emit('size', viewport, num)
@@ -166,7 +176,14 @@ export default {
     },
     closepdf() {
       // 关闭PDF
+      console.log('closepdf - begin')
       if (this.pdfDoc) {
+        if (this.viewport) {
+          const { canvas } = this.$refs
+          const cxt = canvas.getContext('2d')
+          cxt.clearRect(0, 0, this.viewport.width, this.viewport.height);
+        }
+        this.viewport = null
         this.pdfDoc.destroy();
       }
       this.pdfDoc = null
@@ -203,7 +220,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) {
@@ -222,7 +239,7 @@ export default {
       // 初始化pdf
       if (this.pdfDoc) {
         console.log('pdfDocument is ready  destroy,,')
-        await this.pdfDoc.destroy();
+        this.closepdf();
         this.pdfDoc = null
         console.log('pdfDocument is  destroy')
       }
@@ -250,8 +267,9 @@ export default {
     // }
   },
   beforeDestroy() {
+    console.log('---', this.pdfDoc)
     if (this.pdfDoc) {
-      this.pdfDoc.destroy();
+      this.closepdf();
     }
   },
   watch: {
@@ -268,7 +286,9 @@ export default {
             this.initPage = true
             this.loadUrl(val)
             if (this.pdfDoc) {
-              this.pdfDoc.destroy();
+              console.log('wtach 3333')
+              this.closepdf();
+              console.log('wtach 444')
             }
           }
           if (this.showPages) {