vue使用Office?Web实现线上文件预览

更新时间：2022年07月14日 15:27:59 作者：青烟小生

这篇文章主要为大家介绍了vue使用微软的开发接口Office?Web,实现线上文件预览,预览word，excel，pptx，pdf文件,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

我们在浏览器阅读word，excel，pptx的offic文件，可以使用微软的开发接口，一个阅读器Office Web

什么是 Office Web 查看器？

它是一种创建 Office Web Viewer 链接的服务。Office Web Viewer 链接可在浏览器中打开 Word、PowerPoint 或 Excel 文件，否则这些文件将被下载。您可以轻松地将下载链接转换为 Office Web Viewer 链接以在您的网站或博客中使用（例如，食谱、照片幻灯片、菜单或预算模板）。

Office Web Viewer 的一些优点包括：

您无需为 Web 转换 Office 文件（例如，PDF、HTML）。
任何人都可以从您的网站或博客查看 Office 文件，即使他们没有 Office。
它会密切关注您的网站或博客，因为读者无需下载文件，他们就可以留在浏览器中。
一个链接适用于计算机、平板电脑和手机。

vue预览word，excel，pptx，pdf文件

1、做word，excel，pptx的预览，要先确定文件路径访问是通过域名的url来预览，不可以通过IP的url来访问

先把文件路径的url进行url编码（encodeURIComponent）

let router = 'https://aaaaaa.com/file/download?filename=file.obj_id'  //文件路径
let url = encodeURIComponent(routeUrl)

然后用Office Web Viewer的路径接口

http://view.officeapps.live.com/op/view.aspx?src=

把两个拼接在一起

let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
window.open(officeUrl,'_target')

这样就可以预览word，excel，pptx文件了

完整的代码

let routeUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'
let url = encodeURIComponent(routeUrl)
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
window.open(officeUrl,'_target')

2、pdf文件预览

下载好pdf.js(下载地址在下面)，放到static的目录下面

网站链接 http://mozilla.github.io/pdf.js/getting_started/#download

然后

<div style="height:800px;">
  <iframe :src="http://9i0i.com/pic.php?p=pdfSrc" width="100%" height="100%"></iframe>
</div>

getSeePdf(file){
      this.pdffile=file
      let routeUrl = '文件地址url';
      let pSrc = routeUrl + '?r=' + new Date();
      this.pdfSrc = 'static/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
    },

更多的可以了解下微软的这个查看器的官网

以上就是vue使用Office Web实现线上文件预览的详细内容，更多关于vue Office Web文件预览的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

保姆级Vue3开发教程分享
这篇Vue3开发文档，包含了 Vue3 开发中使用的所有语法，文中的示例代码讲解详细，希望所有像他一样还不熟的伙伴快速上手 Vue3，不会的再不看要遭老罪咯
2023-04-04
Vue路由传参详细介绍
这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
Vue组件之间的通信你知道多少
这篇文章主要为大家详细介绍了Vue组件之间的通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue实现列表无缝滚动效果
这篇文章主要为大家详细介绍了vue实现列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue如何动态加载组件详解
组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于vue如何动态加载组件的相关资料,需要的朋友可以参考下
2022-10-10
解决vue-cli输入命令vue ui没效果的问题
这篇文章主要介绍了解决vue-cli输入命令vue ui没效果的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
在Vue中使用Immutable.js的步骤
这篇文章主要介绍了在Vue中使用Immutable.js的步骤，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
深入探究Vue中$nextTick的实现原理
这篇文章主要为大家详细介绍Vue中$nextTick的实现原理，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的小伙伴可以参考一下
2023-06-06
使用vue ant design分页以及表格分页改为中文问题
这篇文章主要介绍了使用vue ant design分页以及表格分页改为中文问题，具有很好的参考价值，希望对大家有所帮助。
2023-04-04
Vue3初始化如何调用函数
这篇文章主要介绍了Vue3初始化如何调用函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07