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

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

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

效果:

组件代码:

js 复制代码
<!--
 * @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>
相关推荐
且白2 分钟前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
AAA_自动化工程师13 分钟前
TIA博途中的程序导出为PDF格式的具体方法示例
pdf·tia博途·程序导出·pdf格式·具体方法
疯狂的沙粒24 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
行云流水剑28 分钟前
【学习记录】如何使用 Python 提取 PDF 文件中的内容
python·学习·pdf
IDRSolutions_CN39 分钟前
PDF 转 HTML5 —— HTML5 填充图形不支持 Even-Odd 奇偶规则?(第二部分)
java·经验分享·pdf·软件工程·团队开发
呆萌的代Ma1 小时前
Cursor实现用excel数据填充word模版的方法
word·excel
Revol_C1 小时前
【调试日志】我只是用wangeditor上传图片而已,页面咋就崩溃了呢~
前端·vue.js·程序员
HelloWord~2 小时前
SpringSecurity+vue通用权限系统2
java·vue.js
upp2 小时前
【bug】Error: /undefinedfilename in (/tmp/ocrmypdf.io.9xfn1e3b/origin.pdf)
ubuntu·pdf·bug·ghostscript
bysking2 小时前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js