vue使用Office|vue使用Office Web实现线上文件预览
目录
- 正文
- 什么是 Office Web 查看器?
- vue预览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来访问
【vue使用Office|vue使用Office Web实现线上文件预览】先把文件路径的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=https://www.it610.com/article/把两个拼接在一起
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='https://www.it610.com/article/+urlwindow.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='https://www.it610.com/article/+urlwindow.open(officeUrl,'_target')
2、pdf文件预览
下载好pdf.js(下载地址在下面),放到
static
的目录下面网站链接 http://mozilla.github.io/pdf.js/getting_started/#download
文章图片
然后
getSeePdf(file){this.pdffile=filelet routeUrl = '文件地址url'; let pSrc = https://www.it610.com/article/routeUrl +'?r=' + new Date(); this.pdfSrc = 'https://www.it610.com/article/static/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf'; },
更多的可以了解下微软的这个查看器的官网
以上就是vue使用Office Web实现线上文件预览的详细内容,更多关于vue Office Web文件预览的资料请关注脚本之家其它相关文章!
推荐阅读
- JS数组中filter方法的使用实例
- vue实现移动端touch拖拽排序
- Vue实现可复用轮播组件的方法
- vue-cli2.x旧版本卸载不掉的问题踩坑指南(附Vue脚手架安装教程)
- tableview|tableview sectionheader
- springboot|springboot 中如何正确在异步线程中使用request
- 前端实现ofd文档在线解析,.word预览,.excel预览,.PDF预览。Office文件系列在线解析预览()
- 【vue3源码】五、watch源码解析
- Hexo|Hexo 搭建与部署指南
- 使用|使用 Vercel 全自动部署个人网站