前端预览文件，pdf,Word,Excel 预览

最新推荐文章于 2022-11-05 15:06:21 发布

染指悲剧

最新推荐文章于 2022-11-05 15:06:21 发布

阅读量418

点赞数 1

分类专栏：文件预览 vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_43039004/article/details/111644793

版权

vue 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

文件预览

1 篇文章 0 订阅

订阅专栏

使用的是element UI弹框 el-dialog，别的也能照常使用

excel
在这里插入图片描述
word

pdf

Word,Excel 预览

<el-dialog
   :visible.sync="fileshow"
   :close-on-click-modal="false"
   class="pdfshow-dialog"
   title="预览"
   width="90%">
     <iframe :src='fileSrc' width="100%" height="100%"
       frameborder="0" scrolling="auto"
       style="position:absolute;left: 0px;z-index:1000">
     </iframe>
     <span slot="footer" class="dialog-footer">
        <el-button type="primary">关闭</el-button>
        <el-button type="primary">下载</el-button>
     </span>
</el-dialog>

给fileSrc赋值

    getfileSrc(file) {
      if (/\.(xlsx|xls|doc|docx)$/.test(file.url)){      //Word,Excel 文件
        this.fileSrc='https://view.officeapps.live.com/op/view.aspx?src='+file.url
        this.pdfshow = true
      }else if(/\.(pdf|PDF)$/.test(file.url)){     //pdf文件
        this.fileshow= true
        this.fileSrc = file.url
      }else{
        this.$message.warning('该格式暂不支持预览');
      }
    },

目前只支持地址文件，本地文件好像不行