cbjsxt-front-master/src/components/costAudit/FilePreview.vue

<template>
  <div class="file-preview">
    <iframe :src="url" frameborder="0" class="preview-frame"></iframe>
  </div>
</template>
<script>
  export default {
    name: 'FilePreview',
    props: {
      fileUrl: {
        type: String,
        default: '',
      },
    },
    computed: {
      url() {
        if (!this.fileUrl) {
          return ''
        }

        try {
          let fileUrl = ''
          if (this.fileUrl.startsWith('http')) {
            fileUrl = this.fileUrl
          } else {
            fileUrl = window.context.form + this.fileUrl
          }
          // 对文件URL进行Base64编码
          const encodedUrl = encodeURIComponent(Base64.encode(fileUrl))

          // 构建 kkFileView 预览URL，添加参数隐藏工具栏
          // officePreviewType=doc：使用文档预览模式
          // hideTopbar=true：隐藏顶部工具栏
          return `${host}:8012/onlinePreview?url=${encodedUrl}`
        } catch (error) {
          return ''
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .preview-frame {
    width: 100%;
    height: 100vh;
    border: none;
  }
</style>