vue通过iframe预览 pdf、word、xls、ppt、txt文件
<!--
* @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="`文件名：${}，文件类型：${}`">
</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 `/op/?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>