@toolspack/ttd-pdfjs 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
   "main": "lib/ttd-pdfjs.umd.min.js",
   "scripts": {
@@ -10,30 +10,32 @@
     "lint": "vue-cli-service lint --max-warnings 100"
   },
   "dependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-laoder": "0.0.1-security",
-    "babel-polyfill": "^6.26.0",
-    "core-js": "^3.34.0",
+    "babel-loader": "^10.0.0",
     "element-ui": "^2.15.14",
-    "less": "^3.8.1",
-    "less-loader": "^4.1.0",
     "pdfjs-dist": "3.11.174",
     "vue": "^2.6.12"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.26.3",
     "@vue/cli-plugin-babel": "~4.5.11",
     "@vue/cli-plugin-eslint": "~4.5.11",
     "@vue/cli-service": "^4.5.11",
     "@vue/eslint-config-airbnb": "^5.3.0",
+    "babel-cli": "^6.26.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
+    "core-js": "^3.34.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^6.2.2",
+    "file-loader": "^6.2.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
     "vue-template-compiler": "^2.6.12"
   }
 }

package/src/App.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import PdfView from './packages/pdfjs/PdfView216.vue'
+import PdfView from './packages/pdfjs/PdfView.vue'
 
 const mybaseUrl = 'https://petx.totodi.com/'
 

package/src/main.js

@@ -6,11 +6,11 @@ import App from './App.vue';
 
 Vue.config.productionTip = false;
 
-Vue.component(Button.name, Button);
-Vue.component(Input.name, Input);
-Vue.component(Upload.name, Upload);
-Vue.component(Select.name, Select);
-Vue.component(Option.name, Option);
+Vue.use(Button);
+Vue.use(Input);
+Vue.use(Upload);
+Vue.use(Select);
+Vue.use(Option);
 
 new Vue({
   render: (h) => h(App),

package/src/packages/index.js

@@ -1,5 +1,7 @@
-import PdfView216 from './pdfjs/PdfView216.vue'
+import PdfView from './pdfjs/PdfView.vue'
+import SwitchPage from './pdfjs/SwitchPage.vue'
 
 export default {
-  PdfView216,
+  PdfView,
+  SwitchPage,
 }

package/src/packages/pdfjs/{PdfView216.vue → PdfView.vue}

@@ -5,7 +5,7 @@
       :page="page" :zoomEnable="zoomEnable" :rotateEnable="rotateEnable"
        @page="onChangePage" @zoom="onScale" @rotate="onRotate"></switch-page>
     </div>
-    <div class="pdf-view-area-wapper" :width="pdfWidth">
+    <div class="pdf-view-area-wapper">
       <div>
         <div
           class="center pdf-view-area"
@@ -55,18 +55,20 @@ if (getChromeVersion()) {
   }
 }
 
-// const PDFJS = require('pdfjs-dist/legacy/build/pdf.js')
 const PDFJS = require('pdfjs-dist')
 
 const defautScale = 1.0
 // PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/legacy/build/pdf.worker.min.js')
+// eslint-disable-next-line
 PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
 // https://unpkg.com/pdfjs-dist@2.16.105/cmaps/
-// const cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/cmaps/'
 // 使用代理的cmaps，会导致加载很慢，改用本地
-
+//  const cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/cmaps/'
 const cMapUrl = 'https://wsp.totodi.com/staticfiles_web/web/pdfjs/cmaps/'
 
+PDFJS.cMapPacked = true
+PDFJS.cMapUrl = cMapUrl
+
 export const maxscale = 3
 export const minscale = 0.2
 
@@ -173,7 +175,10 @@ export default {
           vm.isready = true
 
           const { canvas } = vm.$refs
-          this.style.width = `${viewport.width + 2}px`;
+          if (!canvas) {
+            return false
+          }
+          this.style.width = `${viewport.width + 18}px`;
           this.pdfWidth = `${viewport.width}px`;
           canvas.height = viewport.height
           canvas.width = viewport.width
@@ -374,6 +379,7 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   min-width: 688px;
 }
 .pdf-view-control {
@@ -385,10 +391,12 @@ export default {
   overflow: auto;
   width: 100%;
   flex-shrink: 0%;
+  box-sizing: border-box;
 }
 .pdf-view-area {
   position: relative;
   min-height: 100px;
+  box-sizing: border-box;
   .canvasstyle {
     display: block;
     margin: 0 auto;

package/src/packages/pdfjs/SwitchPage.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { maxscale, minscale } from './PdfView216.vue'
+import { maxscale, minscale } from './PdfView.vue'
 
 export const EnumOptions = [
   // { label: '自动缩放', value: '' },
@@ -194,5 +194,10 @@ export default {
       display: none;
     }
   }
+  @container (max-width: 731px) {
+    .hidden-text {
+      display: none;
+    }
+  }
 }
 </style>