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'],// iframe需要通过office365预览的文件类型officeType: ['doc', 'docx', 'xls', 'xlsx'],}showIframe() {const { type } = this.fileItem;return this.state.fileType.includes(type);}/*** 处理文件预览路径* iframe中预览只能直接打开pdf文件，其他文件需要通过office365预览*/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>