chore: 修改预览地址

package-lock.json

@@ -15,6 +15,7 @@
         "dayjs": "^1.11.3",
         "echarts": "^5.3.2",
         "element-plus": "^2.2.9",
+        "js-base64": "^3.7.7",
         "lodash-es": "^4.17.21",
         "pinia": "^2.0.14",
         "qs": "^6.10.5",
@@ -1029,6 +1030,12 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/ali-oss/node_modules/js-base64": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
+      "dev": true
+    },
     "node_modules/ali-oss/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -2943,10 +2950,9 @@
       "dev": true
     },
     "node_modules/js-base64": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
+      "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -5692,6 +5698,12 @@
             "ms": "2.0.0"
           }
         },
+        "js-base64": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+          "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
+          "dev": true
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -7078,10 +7090,9 @@
       "dev": true
     },
     "js-base64": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
+      "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
     },
     "js-tokens": {
       "version": "4.0.0",

package.json

@@ -12,7 +12,6 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "deploy": "node ./deploy.js",
     "cert": "node ./cert.js"
-
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.4",
@@ -22,6 +21,7 @@
     "dayjs": "^1.11.3",
     "echarts": "^5.3.2",
     "element-plus": "^2.2.9",
+    "js-base64": "^3.7.7",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.14",
     "qs": "^6.10.5",

src/components/base/PreviewFiles.vue

 <script setup lang="ts">
+import { getOnlinePreviewUrl } from '@/utils/onlinePreview'
 const props = defineProps({
-  item: {
-    type: Object,
-    require: true
-  }
+  item: { type: Object, require: true }
 })
 
 let isShowType = ref(1)
@@ -14,11 +12,7 @@ if (props.item?.url?.indexOf('.pdf') !== -1 || props.item?.url?.indexOf('.txt')
   isShowType.value = 3
 } else if (props.item?.url?.indexOf('.mp3') !== -1) {
   isShowType.value = 4
-} else if (
-  props.item?.url?.indexOf('.png') !== -1 ||
-  props.item?.url?.indexOf('.jpg') !== -1 ||
-  props.item?.url?.indexOf('.jpeg') !== -1
-) {
+} else if (props.item?.url?.indexOf('.png') !== -1 || props.item?.url?.indexOf('.jpg') !== -1 || props.item?.url?.indexOf('.jpeg') !== -1) {
   isShowType.value = 5
 } else if (props.item?.url?.indexOf('.rar') !== -1 || props.item?.url?.indexOf('.zip') !== -1) {
   isShowType.value = 6
@@ -28,12 +22,7 @@ if (props.item?.url?.indexOf('.pdf') !== -1 || props.item?.url?.indexOf('.txt')
 <template>
   <el-card>
     <div class="max-w-h">
-      <iframe
-        id="iframe"
-        v-if="isShowType === 1"
-        :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.item?.url}`"
-        >{{ item.name }}</iframe
-      >
+      <iframe id="iframe" v-if="isShowType === 1" :src="getOnlinePreviewUrl(props.item?.url)">{{ item.name }}</iframe>
       <embed :src="props.item?.url" v-else-if="isShowType === 2" />
       <video v-else-if="isShowType === 3" controls id="video">
         <source :src="props.item?.url" />
@@ -42,20 +31,11 @@ if (props.item?.url?.indexOf('.pdf') !== -1 || props.item?.url?.indexOf('.txt')
       <img v-else-if="isShowType === 5" :src="props.item?.url" />
       <div v-else-if="isShowType === 6" class="zip_con">
         <a :href="props.item?.url" style="color: #aa1941">
-          <img
-            v-if="props.item?.url?.indexOf('.rar') !== -1"
-            src="https://webapp-pub.ezijing.com/center_resource/rar.png"
-            class="img_zip"
-          />
+          <img v-if="props.item?.url?.indexOf('.rar') !== -1" src="https://webapp-pub.ezijing.com/center_resource/rar.png" class="img_zip" />
 
-          <img
-            v-else-if="props.item?.url?.indexOf('.zip') !== -1"
-            src="https://webapp-pub.ezijing.com/center_resource/zip.png"
-            class="img_zip"
-          />
+          <img v-else-if="props.item?.url?.indexOf('.zip') !== -1" src="https://webapp-pub.ezijing.com/center_resource/zip.png" class="img_zip" />
           {{ props.item?.name }}
         </a>
-
         <div class="zip_tips">* 该文件格式暂不支持预览,可点击上方文件名下载</div>
       </div>
     </div>

src/utils/onlinePreview.ts

+import { Base64 } from 'js-base64'
+
+export function getOnlinePreviewUrl(url: string) {
+  return 'http://172.16.3.203:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+}