Html 在线预览word、excel、pdf等文档

一个快速的解决方法：

如果项目需求只要求预览内容而不要求对文档进行编辑的操作，则可以选择在线预览的方式进行处理；

现附上两个在线预览office文档的地址：(浏览器都需要chrome的内核)

1、 https://docs.google.com/viewer?url=（输入你的文档在服务器中的地址）

2、 https://view.officeapps.live.com/op/view.aspx?src=(输入你的文档在服务器中的地址)

https://view.officeapps.live.com/op/view.aspx?src=http://ys-k.ysepan.com/320623523/119513814/SITMfSq554H5I2X8JM416/%E9%BB%91%E9%87%91%E5%88%9A2023.4.07.xls

问题一：

地址没有转码

如果后端处理过了就没这问题，没处理我们需要使用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>标签是表格展示在想放的位置不用跳转页面

let src

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

NDBlog.IT