kd-aiot-frontend-aps/src/components/addDoc/browse.vue

<template>
  <ele-modal
    :visible.sync="showEditFlag"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    append-to-body
    :fullscreen="true"
  >
    <iframe
      :src="fileUrl"
      width="100%"
      v-if="showEditFlag"
      style="height: calc(100vh - 100px)"
      frameborder="0"
      allowfullscreen="true"
    ></iframe
  ></ele-modal>
</template>

<script>
  import { getFileType } from './util.js';

  export default {
    data() {
      return {
        fileUrl: '',
        showEditFlag: false
      };
    },

    methods: {
      open(row) {
        this.showEditFlag = true;
        this.setFileUrl(row);
      },
      setFileUrl(row) {
        console.log(row);
        let file = row.storagePath[0];
        let fileNames = file.storePath.split('/');
        let url =
          window.location.origin +
          '/api/main/file/getFile?objectName=' +
          file.storePath +
          '&fullfilename=' +
          fileNames[fileNames.length - 1];
        this.fileUrl = '/kkfile/onlinePreview?url=' + btoa(url);
        this.visible = true;
      }
    }
  };
</script>
<style scoped lang="scss"></style>