vue通过iframe预览 pdf、word、xls、ppt、txt文件

vue 通过 iframe 预览 pdf、word、xls、ppt、txt 文件

iframe 中预览只能直接打开 pdf 文件，其他文件需要通过 office365 预览。

效果：

组件代码：

!--
 * @fileName: 文件预览 -FileView.vue
 * @date: yanghaoxing-2024-08-16 09:32:24
!-->
template>
  div class="file-view">
    iframe v-show="showIframe()"
            :src="getViewFilePath(fileItem)"
            class="previewIframe">/iframe>
    div class="pt-20"
         v-show="!showIframe()">
      a-result status="success"
                title="该文件无法预览，已开始自动下载!"
                :sub-title="` 文件名：${fileItem.name}，文件类型：${fileItem.type}`">
      /a-result>
    /div>
  /div>
/template>

script lang="ts">
import {
  Component, Emit, Prop, Watch, Mixins,
} from 'vue-property-decorator';
import abpbase from 'geofly-framework-web-common/libs/abpbase';
import MapMixins from '@/map/mixins/mapMixins';

@Component({
  name: 'FileView',
  components: {},
})
export default class FileView extends Mixins(abpbase, MapMixins) {
  @Prop({ type: Object }) fileItem;

  state = {
    
    fileType: ['txt', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'jpg', 'png', 'gif', 'bmp', 'jpeg'],
    
    officeType: ['doc', 'docx', 'xls', 'xlsx'],
  }

  showIframe() {
    const { type } = this.fileItem;
    return this.state.fileType.includes(type);
  }

  
  getViewFilePath({ type, filePath }) {
    if (this.state.officeType.includes(type)) {
      return `https://view.officeapps.live.com/op/view.aspx?src=${filePath}`;
    }
    return filePath;
  }
}
/script>

style lang="less" scoped>
.file-view {
  width: 100%;
  height: calc(100vh - 100px);
  border: 1px solid #ccc;
  .previewIframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}
/style>