浏览器如何实现PDF和office文件在线预览？

微软也已经免费提供在线版本office预览啦

https://view.officeapps.live.com/op/view.aspx?src=URL
src后面的URL是网上能访问到的文件地址，比如http://abc.com/file/demo.xlsx

直接访问：https://view.officeapps.live.com/op/view.aspx?src=http://abc.com/file/demo.xlsx

注意:经常会出现打不开的问题:



解决办法：

1、如果是前端js之类，处理办法是给URL采用encodeURIComponent()方法。
2、或者在服务器端转码urlencode('URL')过后输出到前端。

https://view.officeapps.live.com/op/view.aspx?src=encodeURIComponent(http://abc.com/file/demo.xlsx)

二 除了微软外 更多功能的XDOC文档预览云服务  (https://view.xdocin.com/)  个人感觉挺功能强

简单 实时响应 跨端  多种格式, 水印 ,时效等...  更多可参考官网 👆

js调用方法 ： window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("要预览的文件路径（要求必须是外网文件地址）"));

 handleAttachment(file) {
      this.fileUrl=file.url;
      const fileType = file.url.split('.').pop().toLowerCase() // 文件的扩展名（格式）
      if(fileType!= 'pdf'){
        this.fileUrl='https://view.officeapps.live.com/op/view.aspx?src='+file.url;
      }

      // this.openFilePreview=true;
      window.open(this.fileUrl, '_blank')
      // window.location.href=file.url;
    },