@toolspack/ttd-common 0.5.5 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-common",
-  "version": "0.5.5",
+  "version": "1.0.0",
   "private": false,
   "main": "lib/ttd-common.umd.min.js",
   "scripts": {
@@ -16,6 +16,7 @@
     "core-js": "^3.6.5",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
+    "pdfjs-dist": "2.16.105",
     "vue": "^2.6.12"
   },
   "devDependencies": {
@@ -30,6 +31,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^6.2.2",
+    "sockjs-client": "^1.5.1",
     "vue-template-compiler": "^2.6.12"
   }
 }

package/src/App.vue

@@ -1,22 +1,44 @@
 <template>
   <div id="app">
-    <el-button @click="viewImg">预览</el-button>
-    <img :src="pdfurl+'&w=120'" />
+    <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>
+  <PdfView :pdfurl="url" />
   </div>
 </template>
 
 <script>
+import PdfView from './packages/pdfjs/PdfView216.vue'
+
+const _baseUrl = 'http://peys.totodi.com:37811/'
 
 export default {
+  components: { PdfView },
   name: 'App',
   data() {
     return {
+      url: 'https://petx.totodi.com/visit/totodi-contract/20230905-e777d0d33a6f440db4b5276b397121fd-无法翻页-40.pdf?expireDataTime=1693900521328',
+      uName: 'totodi-contract',
+      action: `${_baseUrl}zuul/file-service/oos/uploadFile`,
     }
   },
+  mounted() {
+  },
   methods: {
-    showImg(url) {
-    },
-    viewImg(url) {
+    uploadFile() {
+      const formData = new FormData();
+      const files = this.$refs.fileInput.files;
+
+      // 添加文件数据到表单中
+      for (let i = 0; i < files.length; i++) {
+        formData.append('files', files[i]);
+      }
+
+      // 添加其他字段数据到表单中
+      formData.append('u_name', this.uName);
     },
   },
 }

package/src/packages/index.js

@@ -4,10 +4,13 @@ import WzhSign from './ukey/WzhSign.vue'
 import SignNew from './ukey/SignNew.vue'
 import WzhSignChrome from './ukey/WzhSignChrome.vue'
 
+import PdfView216 from './pdfjs/PdfView216.vue'
+
 export default {
   CfcaPdf,
   Ukey,
   WzhSign,
   WzhSignChrome,
   SignNew,
+  PdfView216,
 }

package/src/packages/pdfjs/PdfView216.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="pdf-view">
+    <div class="pdf-view-control" v-if="showPages">
+      <switch-page ref="switchPage" @page="onChangePage" :numPages="page_count"></switch-page>
+    </div>
+    <div class="pdf-view-area-wapper">
+      <div :style="style">
+        <div
+          class="center pdf-view-area"
+          @drop="onDrop"
+          @dragover="onDragOver"
+          :style="{'border': border?'1px solid #666': ''}"
+          v-if="pdfurl"
+        >
+          <div v-if="fileLoading"  class="pdf-view-loading">文件加载中...</div>
+          <!-- <div v-else-if="pageRendering" class="pdf-view-rendering">内容渲染中...</div> -->
+          <canvas class="canvasstyle" ref="canvas"></canvas>
+          <div class="label-area">
+            <slot></slot>
+          </div>
+        </div>
+        <div v-else class="pdf-view-empty">未找到资源，请联系管理员!</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+const PDFJS = require('pdfjs-dist')
+
+const defautScale = 1.0
+
+PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/legacy/build/pdf.worker.entry')
+
+export default {
+  props: {
+    pdfurl: {
+      default: '',
+    },
+    scale: {
+      type: Number,
+      default: defautScale,
+    },
+    showPages: {
+      type: [String, Number, Boolean],
+      default: true,
+    },
+    border: {
+      type: [String, Number, Boolean],
+      default: true,
+    },
+    marginAuto: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    page: {
+      type: [String, Number],
+      default: 1,
+    },
+    showWidth: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      pdfDoc: null, // pdfjs 生成的对象
+      pageNum: 1, // 当前页数
+      pageRendering: false,
+      fileLoading: true,
+      pageNumPending: null,
+      compuscale: defautScale, // 放大倍数
+      page_count: 0, // 总页数
+      maxscale: 1.5, // 最大放大倍数
+      minscale: 0.8, // 最小放大倍数
+      isready: false,
+      initPage: true, // 初始化页面
+      style: {
+        width: '860px', // 先给个默认值，当渲染后，后自动按实际值渲染，否则打标签那里，会显示异常
+        margin: this.marginAuto === '' || this.marginAuto ? '0 auto' : '0',
+      },
+    }
+  },
+  methods: {
+    async renderPage(num) {
+      // 渲染pdf
+      const vm = this
+      this.pageRendering = true
+      // Using promise to fetch the page
+      try {
+        const page = await this.pdfDoc.getPage(num)
+        let scaleNum = vm.compuscale
+        let viewport = ''
+        const viewboxWidth = this.showWidth
+        if (this.initPage && viewboxWidth) {
+          const desiredWidth = parseInt(viewboxWidth, 10) - 2
+          // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
+          viewport = page.getViewport({ scale: 1.0 })
+          scaleNum = desiredWidth / viewport.width
+          this.initPage = false
+          this.compuscale = scaleNum
+          this.maxscale = scaleNum
+        }
+        // 重新渲染 缩放过的PDF
+        viewport = page.getViewport({ scale: scaleNum })
+
+        // 将 canvas 尺寸 传给父组件
+        this.$emit('size', viewport, num)
+
+        // Render PDF page into canvas context
+        vm.isready = true
+
+        const { canvas } = vm.$refs
+
+        this.style.width = `${viewport.width + 2}px`;
+        canvas.height = viewport.height
+        canvas.width = viewport.width
+
+        const renderContext = {
+          canvasContext: canvas.getContext('2d'),
+          viewport,
+        }
+        const renderTask = page.render(renderContext)
+
+        // Wait for rendering to finish
+        await renderTask.promise
+        vm.pageRendering = false
+        if (vm.pageNumPending !== null) {
+          // New page rendering is pending
+          vm.renderPage(vm.pageNumPending)
+          vm.pageNumPending = null
+        }
+        this.$emit('renderSuccess')
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.pageRendering = false
+      }
+    },
+    prev() {
+      // 上一页
+      if (this.pageNum <= 1) {
+        return
+      }
+      this.pageNum--
+      this.queueRenderPage(this.pageNum)
+    },
+    next() {
+      // 下一页
+      if (this.pageNum >= this.page_count) {
+        return
+      }
+      this.pageNum++
+      this.queueRenderPage(this.pageNum)
+    },
+    onChangePage(page) {
+      this.emitPage(page)
+      // switch page  改变页码
+      this.queueRenderPage(page)
+    },
+    emitPage(page) {
+      this.$emit('pageChange', page, this.page_count, page === this.page_count)
+    },
+    closepdf() {
+      // 关闭PDF
+      if (this.pdfDoc) {
+        this.pdfDoc.destroy();
+      }
+      this.pdfDoc = null
+      this.isready = false
+      this.compuscale = this.scale
+      this.$emit('closepdf')
+    },
+    queueRenderPage(num) {
+      if (this.pageRendering) {
+        this.pageNumPending = num
+      } else {
+        this.renderPage(num)
+      }
+    },
+    async loadUrl(url) {
+      if (!PDFJS) {
+        return false
+      }
+      this.fileLoading = true
+      //  此处无法确定，到底是否使用encodeURI
+      // var reg = /[\u4e00-\u9fa5]+/
+      // if (reg.test(url)) {
+      //   url = encodeURI(url)
+      //   console.log('-----encodeURI------', url)
+      // }
+      console.log('----PdfView---', url)
+      let pdfDoc_
+      try {
+        console.log('888--')
+        // const pdfData = await fetch(
+        //   new URL(url, window.location).href,
+        // );
+        // const arrayBufferPdf = await pdfData.arrayBuffer(); // 转成 ArrayBuffer 塞给 pdf.js
+        // pdfDoc_ = await PDFJS.getDocument({ data: arrayBufferPdf }).promise;
+        pdfDoc_ = await PDFJS.getDocument({
+          url: encodeURI(url),
+          cMapUrl: 'https://unpkg.com/pdfjs-dist@2.16.105/cmaps/',
+          cMapPacked: true,
+        }).promise
+      } catch (error) {
+        console.log('999999--')
+        console.error(error)
+
+        const pdfData = await fetch(
+          new URL(url, window.location).href,
+        );
+        const arrayBufferPdf = await pdfData.arrayBuffer(); // 转成 ArrayBuffer 塞给 pdf.js
+        pdfDoc_ = await PDFJS.getDocument({ data: arrayBufferPdf }).promise;
+      } finally {
+        this.fileLoading = false
+      }
+
+      // 初始化pdf
+      if (this.pdfDoc) {
+        console.log('pdfDocument is ready  destroy,,')
+        await this.pdfDoc.destroy();
+        this.pdfDoc = null
+        console.log('pdfDocument is  destroy')
+      }
+      this.pdfDoc = pdfDoc_
+      this.page_count = pdfDoc_.numPages
+      console.log('this.page_count', this.page_count)
+      this.$emit('numPages', pdfDoc_.numPages)
+      this.renderPage(this.pageNum)
+      this.emitPage(this.pageNum)
+    },
+    onDrop(event) {
+      this.$emit('drop', event)
+    },
+    onDragOver(event) {
+      // 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
+      // 这要通过调用 ondragover 事件的 event.preventDefault() 方法：
+      event.preventDefault()
+    },
+  },
+  mounted() {
+    this.compuscale = this.scale
+    // this.initPage = true
+    // if (this.pdfurl) {
+    //   this.loadUrl(this.pdfurl)
+    // }
+  },
+  beforeDestroy() {
+    if (this.pdfDoc) {
+      this.pdfDoc.destroy();
+    }
+  },
+  watch: {
+    scale(val) {
+      if (val) {
+        this.compuscale = val
+      }
+    },
+    pdfurl: {
+      handler(val) {
+        this.$nextTick(() => {
+          if (val) {
+            this.pageNum = 1
+            this.initPage = true
+            this.loadUrl(val)
+            if (this.pdfDoc) {
+              this.pdfDoc.destroy();
+            }
+          }
+          if (this.showPages) {
+            this.$refs.switchPage.setPage(1)
+          }
+        })
+      },
+      immediate: true,
+    },
+    // 监听页码变化，渲染对应合同页
+    page(newPage, oldPage) {
+      this.queueRenderPage(newPage)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.pdf-view {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pdf-view-control {
+  text-align: center;
+  margin: 10px 0;
+}
+.pdf-view-area-wapper {
+  flex: 1 1 0%;
+  overflow: auto;
+  width: 100%;
+  flex-shrink: 0%;
+}
+.pdf-view-area {
+  position: relative;
+  min-height: 700px;
+  .canvasstyle {
+    display: block;
+    margin: 0 auto;
+  }
+  .label-area {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+  }
+}
+.pdf-view-empty {
+  text-align: center;
+  line-height: 150px;
+  font-size: 14px;
+  color: #999;
+}
+
+.pdf-view-loading, .pdf-view-rendering {
+  margin-top: 40px;
+  text-align: center;
+  font-size: 14px;
+  color: #999;
+}
+</style>

package/src/packages/ukey/SignNew.vue

@@ -13,7 +13,7 @@ export default {
   data() {
     return {
       child: null,
-      isIE: false,
+      isIE: true,
     }
   },
   props: {
@@ -27,27 +27,34 @@ export default {
   },
   mounted() {
     if (this.isIE) {
+      console.log('--- ie sign')
       this.child = this.$refs.signIe
     } else {
+      console.log('--- chrome sign')
       this.child = this.$refs.signChrome
     }
   },
   methods: {
     getBrowserInfo() {
-      const { appVersion, appName } = navigator
-      if (appName.indexOf('Internet') >= 0) {
+      const { userAgent, plugins, mimeTypes } = navigator
+
+      if (userAgent.indexOf('Trident') >= 0) {
         this.isIE = true
-        return false
+        return true
       }
-      if (appVersion.indexOf('Trident') >= 0) {
+      // 360的急速模式，需要使用ie签署控件(無法實現,或不稳定，360会快速修复让用户无法检测)
+      // const plugin360 = [
+      //   '360', '360SoftMgrPlugin', 'ActiveX hosting plugin for Firefox/Chrome',
+      //   'GamePlugin', 'QQMail Plugin', 'Tencent QQ', 'npQQPhotoDrawEx']
+      if (plugins['360SoftMgrPlugin']) {
         this.isIE = true
-        return false
+        return true
       }
-
-      // 360的急速模式，需要使用id签署控件
-      if (appVersion.indexOf(' WOW64') >= 0) {
+      if (mimeTypes['application/360softmgrplugin']) {
         this.isIE = true
+        return true
       }
+      this.isIE = false
     },
   },
 }

package/src/packages/ukey/Ukey.vue

@@ -167,4 +167,4 @@ export default {
   position: absoute;
   left: -5000px;
 }
-</style>>
+</style>

package/src/packages/ukey/WzhSign.vue

@@ -6,8 +6,6 @@
   </div>
 </template>
 <script>
-// import { getSignHash, mergeHash } from '@/api/ess'
-
 import { getUrl } from '../utils'
 
 export default {
@@ -24,8 +22,11 @@ export default {
       classid = 'clsid:8BF7E683-630E-4B59-9E61-C996B671EBDF'
       // classid = 'clsid:63F9892E-D854-476E-A839-C8BA79254EC1'
     }
+
+    const { userAgent } = navigator
+    const isIE = userAgent.indexOf('Trident') >= 0
     return {
-      isIE: navigator.appName.indexOf('Internet') >= 0 || navigator.appVersion.indexOf('Trident') >= 0,
+      isIE,
       publicPath: 'https://wsp.totodi.com/jz/', // 为了获取public下的静态文件
       codebase,
       classid,
@@ -51,8 +52,6 @@ export default {
       if (this.CryptoAgent) {
         return false
       }
-      // 使用refs 拿到的元素 不能ukey签章
-      // this.CryptoAgent = document.getElementById('CryptoAgent')
       this.CryptoAgent = this.$refs.CryptoAgent
       if (!this.CryptoAgent) {
         alert('验签插件加载失败！')
@@ -315,4 +314,4 @@ export default {
   position: absolute;
   left: -5000px;
 }
-</style>>
+</style>

package/src/packages/ukey/WzhSignChrome.vue

@@ -1,11 +1,8 @@
 <!--无纸化 签署-->
 <template>
-  <div class="CryptoAgent-wrapper">
-  </div>
+  <div class="CryptoAgent-wrapper"></div>
 </template>
 <script>
-// import { getSignHash, mergeHash } from '@/api/ess'
-
 import { getUrl } from '../utils'
 
 import WZHforChrome from './WZHforChrome'
@@ -14,7 +11,6 @@ export default {
   mixins: [WZHforChrome],
   data() {
     return {
-      isIE: navigator.appName.indexOf('Internet') >= 0 || navigator.appVersion.indexOf('Trident') >= 0,
       sourceData: '', // 签名原文， 动态随机字符串
       certType: 'RSA', // 签名算法
       CryptoAgent: null,
@@ -244,4 +240,4 @@ export default {
   position: absolute;
   left: -5000px;
 }
-</style>>
+</style>