添加查看功能依赖插件下载功能不完善

2022-12-08 10:43:20 +08:00 · 2022-12-08 10:43:20 +08:00 · b9f97fe312
parent 08f9f0e3ad
commit b9f97fe312
3 changed files with 70 additions and 5 deletions
--- a/package.json
+++ b/package.json
@ -16,7 +16,9 @@
  "dependencies": {
    "axios": "0.18.1",
    "core-js": "^3.26.1",
+    "docx-preview": "^0.1.14",
    "element-ui": "2.13.2",
+    "js-base64": "^3.7.3",
    "js-cookie": "2.2.0",
    "js-md5": "^0.7.3",
    "moment": "^2.29.4",
--- a/src/views/fileList/FileList.vue
+++ b/src/views/fileList/FileList.vue
@ -91,6 +91,15 @@
        <el-button type="primary" @click="addTypeSubmit">确 定</el-button>
      </span>
    </el-dialog>
+
+    <!--阅览-->
+    <el-dialog
+      title="浏览"
+      :visible.sync="viewDialogVisible"
+      width="90%"
+      :before-close="viewHandleClose">
+      <iframe :src="viewUrl" style="width: 100%; height: 800px"></iframe>
+    </el-dialog>
    <el-table
      v-loading="listLoading"
      :data="list"
@ -133,6 +142,7 @@
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="scope">
+          <i class="el-icon-files" @click="viewFile(scope.row.location)" style="cursor: pointer">查看</i>
          <i class="el-icon-download" @click="downloadFile(scope.row.location)" style="cursor: pointer">下载</i>
        </template>
      </el-table-column>
@ -140,11 +150,15 @@
  </div>
 </template>

+<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>-->
+
+
 <script>
 import { getList } from '@/api/table'
 import pageUtils from '@/utils/pageUtils'
 import { Message } from 'element-ui'
 import { getFilesInfoByName, getFilesInfoByType } from '@/utils/http/interface'
+import { toBase64 } from 'js-base64'

 export default {
  name: 'FileList',
@ -225,13 +239,14 @@ export default {
      typeDialogVisible: false,

      //文件类型列表
-      filesTypeList: null
+      filesTypeList: null,
      // 暂时不需要
      // filesData:{
      //
      // }
-
-
+      // 浏览查看
+      viewDialogVisible:false,
+      viewUrl:null
    }
  },
  created() {
@ -274,6 +289,20 @@ export default {
      // pageUtils.openPage(this.$router, '/api' + link)
    },

+
+    viewFile(link){
+      var url = 'http://127.0.0.1:9528/api/' + link; //要预览文件的访问地址
+      this.viewUrl='http://192.168.1.198:8012/onlinePreview?url='+encodeURIComponent(toBase64(url))
+      this.viewDialogVisible = true
+      //
+      // window.open();
+    },
+
+    viewHandleClose(){
+      this.viewDialogVisible = false
+      this.viewUrl = null
+    },
+
    //关闭上传弹窗
    handleClose() {
      this.dialogVisible = false;
--- a/yarn.lock
+++ b/yarn.lock
@ -3968,6 +3968,13 @@ doctrine@^3.0.0:
  dependencies:
    esutils "^2.0.2"

+docx-preview@^0.1.14:
+  version "0.1.14"
+  resolved "https://registry.npmmirror.com/docx-preview/-/docx-preview-0.1.14.tgz#1fd68b6bef8962fa5d01b4e9ba26dd3b2b7ee884"
+  integrity sha512-AoMAAEPG7JvI8g68Yti7v8QyzvfLBoQ9bcd/Hn0IkBqtj61kHWN983be5NGrw7m3LYNzW/NZbxv5KbVmyV018g==
+  dependencies:
+    jszip ">=3.0.0"
+
 dom-converter@^0.2.0:
  version "0.2.0"
  resolved "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz"
@ -5582,6 +5589,11 @@ image-size@^0.5.1:
  resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz"
  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==

+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 import-cwd@^2.0.0:
  version "2.1.0"
  resolved "https://registry.npmmirror.com/import-cwd/-/import-cwd-2.1.0.tgz"
@ -6633,6 +6645,11 @@ js-base64@^2.1.9:
  resolved "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz"
  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==

+js-base64@^3.7.3:
+  version "3.7.3"
+  resolved "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.3.tgz#2e784bb0851636bf1e99ef12e4f3a8a8c9b7639f"
+  integrity sha512-PAr6Xg2jvd7MCR6Ld9Jg3BmTcjYsHEBx1VlwEwULb/qowPf5VD9kEMagj23Gm7JRnSvE/Da/57nChZjnvL8v6A==
+
 js-beautify@^1.6.12, js-beautify@^1.6.14:
  version "1.14.7"
  resolved "https://registry.npmmirror.com/js-beautify/-/js-beautify-1.14.7.tgz"
@ -6824,6 +6841,16 @@ jsprim@^1.2.2:
    json-schema "0.4.0"
    verror "1.10.0"

+jszip@>=3.0.0:
+  version "3.10.1"
+  resolved "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
 killable@^1.0.1:
  version "1.0.1"
  resolved "https://registry.npmmirror.com/killable/-/killable-1.0.1.tgz"
@ -6891,6 +6918,13 @@ levn@^0.3.0, levn@~0.3.0:
    prelude-ls "~1.1.2"
    type-check "~0.3.2"

+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 lines-and-columns@^1.1.6:
  version "1.2.4"
  resolved "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
@ -7988,7 +8022,7 @@ p-try@^2.0.0:
  resolved "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz"
  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==

-pako@~1.0.5:
+pako@~1.0.2, pako@~1.0.5:
  version "1.0.11"
  resolved "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz"
  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
@ -9531,7 +9565,7 @@ set-value@^2.0.0, set-value@^2.0.1:
    is-plain-object "^2.0.3"
    split-string "^3.0.1"

-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
  version "1.0.5"
  resolved "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz"
  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==