kd-aiot-frontend-mes/src/views/produce/components/picking/fileBrowse.vue

<template>
  <ele-modal
    title="详情"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    append-to-body
    :maxable="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="80%"
  >
    <div>
      <iframe
        :src="fileUrl"
        width="100%"
        style="height: calc(70vh - 20px); margin-top: 30px"
        frameborder="0"
        allowfullscreen="true"
      ></iframe>
    </div>

    <div slot="footer">
      <el-button @click="handleClose"> 关闭 </el-button>
    </div>
  </ele-modal>
</template>

<script>
  export default {
    components: {},
    mixins: [],

    data() {
      return {
        fileUrl: '',
        visible: false
      };
    },
    computed: {},
    mounted() {},
    methods: {
      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;
      },

      handleClose() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped></style>