文件预览（.doc / .xls / .ppt / .pdf）

原创已于 2022-03-14 18:58:40 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#webview #javascript #elementui

于 2019-10-17 10:47:24 首次发布

js 同时被 2 个专栏收录

77 篇文章

订阅专栏

vue

62 篇文章

订阅专栏

本文介绍了一种利用微软Office Online服务在线预览.doc/.xls/.ppt文件的方法，只需将文件地址填入特定的iframe源中即可实现。同时，文章还提到了.pdf格式文件可以直接在浏览器中预览的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.doc / .xls / .ppt都可以用微软提供的在线预览

微软提供了一个在线预览的页免费版Office Online网页版- 查看编辑Word、Excel、PPT | Office

src后面填写你上传的文件地址

 <!--doc xls ppt-->
        <iframe
          v-if="type == 'office'"
          style="width: 100%;height: 100%;"
          :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl"
          frameborder="0"></iframe>

.pdf格式的文件浏览器就可以直接预览


        <!--pdf  fileUrl为文件地址-->
        <iframe
          v-if="type == 'pdf'"
          style="width: 100%;height: 100%;"
          :src="fileUrl"
          frameborder="0"></iframe>
        <!--img-->
        <img v-if="type == 'image'" :src="fileUrl" alt="" style="width: 100%;height: 100%;">