@toolspack/ttd-pdfjs 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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" :style="{width: pdfWidth}" >
       <div>
         <div
           class="center pdf-view-area"
@@ -55,18 +55,19 @@ 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')
 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,6 +174,9 @@ export default {
           vm.isready = true
 
           const { canvas } = vm.$refs
+          if (!canvas) {
+            return false
+          }
           this.style.width = `${viewport.width + 2}px`;
           this.pdfWidth = `${viewport.width}px`;
           canvas.height = viewport.height

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>