脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue Office Web文件预览

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="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文件预览的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 使用element-ui,el-row中的el-col数据为空页面布局变乱问题

    使用element-ui,el-row中的el-col数据为空页面布局变乱问题

    这篇文章主要介绍了使用element-ui,el-row中的el-col数据为空页面布局变乱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue 中对图片地址进行拼接的方法

    Vue 中对图片地址进行拼接的方法

    今天小编就为大家分享一篇Vue 中对图片地址进行拼接的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解vue表单——小白速看

    详解vue表单——小白速看

    大家可以用 v-model 指令在表单控件元素上创建双向数据绑定。这篇文章主要介绍了vue表单详解,需要的朋友可以参考下
    2018-04-04
  • Vue.js实现音乐播放器

    Vue.js实现音乐播放器

    这篇文章主要为大家详细介绍了Vue.js实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 一文详细分析Vue3中的emit用法(子传父)

    一文详细分析Vue3中的emit用法(子传父)

    Emit是Vue3中另一种常见的组件间传值方式,它通过在子组件中触发事件并将数据通过事件参数传递给父组件来实现数据传递,这篇文章主要给大家介绍了关于详细分析Vue3中emit用法(子传父)的相关资料,需要的朋友可以参考下
    2024-05-05
  • Vue element实现权限管理业务流程详解

    Vue element实现权限管理业务流程详解

    目前本人再使用vue-element-admin项目时都是通过直接删除一些用不上的路由来进行侧边栏的清除，但是其实有一个更加好的办法来对项目的侧边栏显示的内用进行管理，就是权限管理，其实也不知道这个方法好不好，原理上来说时跟直接删除该路由的方式时一样的
    2022-08-08
  • 基于element-ui对话框el-dialog初始化的校验问题解决

    基于element-ui对话框el-dialog初始化的校验问题解决

    这篇文章主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue中的scope使用详解

    vue中的scope使用详解

    这篇文章主要介绍了vue中的scope使用详解,需要的朋友可以参考下
    2017-10-10
  • Vue3表单组件el-form校验规则rules属性示例详解

    Vue3表单组件el-form校验规则rules属性示例详解

    在el-form中正确使用rules校验是非常重要的,rules使用不当容易出现规则不生效、规则一直被触发等各种现象,这篇文章主要给大家介绍了关于Vue3表单组件el-form校验规则rules属性的相关资料,需要的朋友可以参考下
    2024-08-08
  • 解决vuex数据页面刷新后初始化操作

    解决vuex数据页面刷新后初始化操作

    这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论