关于微软excel在线预览的使用小记

       最近公司有一个需求需要将一些Excel在前端页面展示出来，因为表格内容暂时无法固定所以后端也不好解析（前端解析也挺麻烦），一开始想使用spreadJS展示的，也是由于表格内容没有个固定格式也是不太好实现，最终选择了微软的在线文档预览使用方法也比较简单

window.open('https://view.officeapps.live.com/op/view.aspx?src='+ 要预览的文档地址)

拼接好了顺利的话直接就可以跳转打开文档。

 

非常完美 

但是实际使用中并没有这么顺利

弹出错误界面

 看到这个页面就说明文件的地址不符合要求，遇到了坑。

我将我在这过程中遇到的坑总结了一下

问题一：

地址没有转码

如果后端处理过了就没这问题，没处理我们需要使用encodeURIComponent(地址)方法转码

转码前： http://abcd.com/file/downloadFile?文件名.xlsx

转码后：http://abcd.com/file/downloadFile?%E6%96%87%E4%BB%B6%E5%90%8D.xlsx

问题二：

地址中没有文件名后缀

列如返回的文件地址为http://abcd.com/file/downloadFile?文件名/，地址对的话，前端也是可以正常下载的，但是微软的在线预览无法识别也会跳转到错误页。

和后端沟通后把文件名改成‘文件名.xlsx’后才可以，前端自加改的话，地址就不对了。

所以必须要有后缀名否则无法识别 ‘http://abcd.com/file/downloadFile?文件名.xlsx’

问题三：

文件地址下载地址中如果需要传其他参数一定要注意

例如我的下载地址是："http://abcd.com/file/downloadFile?文件名.xlsx/"下载时需要传"bucket=table-file" 

正常的话

http://abcd.com/file/downloadFile?bucket=state-file&文件名.xlsx   

和

http://abcd.com/file/downloadFile?文件名.xlsx&bucket=state-file

两种写法都是可以的。 事实上都能下载，也是没问题的。但是前者的写法使用在线预览是打不开的，直接报错。感觉这是一个很坑的地方，只有把文件名放前面，其他参数放后面才可以正常预览

问题四：

文件太大也不行

目前最大可以支持10 MB 的 Excel 文件超出限制，也无法打开。但是也能满足多试场景需求了。大于10MB的文件只能做个判断以其他方式展示（可以先自行解析使用table渲染，也可以转成PDF格式再展示）我暂时还没找到更好的办法

问题五

文档地址不能直接使用 ip

如果使用IP地址也会报错，文档地址不能直接使用 ip，需要通过域名访问，并且端口必须是 80 端口才能正常使用

最后附上完整的地址

使用<iframe>标签是表格展示在想放的位置不用跳转页面

<iframe :src="src" frameborder="1" width="100%" :height="600px"></iframe>

let src 
src.value = `https://view.officeapps.live.com/op/view.aspx?src=` + encodeURIComponent(http://abcd.com/file/downloadFile?文件名.xlsx&bucket=state-file")