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

·  阅读 4175
vue预览word,excel,pptx,pdf文件

这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

我们在浏览器阅读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

百度网盘:链接: pan.baidu.com/s/1tdGrN3L-… 提取码: pucv

在这里插入图片描述

然后

<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';
    },
复制代码

更多的可以了解下微软的这个查看器的官网www.microsoft.com/en-us/micro…

分类:
前端
标签:
分类:
前端
标签: