2024-02-20

viewer

package-lock.json

@@ -9772,6 +9772,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
       "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash._arraycopy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz",
@@ -19330,6 +19335,22 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
+    "v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      },
+      "dependencies": {
+        "throttle-debounce": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+          "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+        }
+      }
+    },
     "v8flags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "pubsub-js": "^1.9.4",
     "sass-loader": "6.0.6",
     "svg-sprite-loader": "3.7.3",
+    "v-viewer": "^1.6.4",
     "vue": "2.5.16",
     "vue-cookie": "1.1.4",
     "vue-i18n": "^8.25.0",

src/main.js

@@ -20,12 +20,14 @@ import getLodop from '@/utils/LodopFuncs.js'
 import { debounce,throttle} from '@/utils/common.js'
 import './utils/vxe-table'
 
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 
 Vue.component('downloadExcel', JsonExcel)
 // Vue.component('pdf', pdf)
 Vue.use(VueCookie)
 Vue.config.productionTip = false
-
+Vue.use(Viewer)
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock
 if (process.env.NODE_ENV !== 'production') {
   require('@/mock')
@@ -52,3 +54,10 @@ new Vue({
   template: '<App/>',
   components: { App }
 })
+
+Viewer.setDefaults({
+  // 需要配置的属性 注意属性并没有引号
+  title: false,
+  toolbar: true,
+  zIndex: 99999,
+})