一个快速的解决方法:
如果项目需求只要求预览内容而不要求对文档进行编辑的操作,则可以选择在线预览的方式进行处理;
现附上两个在线预览office文档的地址:(浏览器都需要chrome的内核)
1、 https://docs.google.com/viewer?url=(输入你的文档在服务器中的地址)
2、 https://view.officeapps.live.com/op/view.aspx?src=(输入你的文档在服务器中的地址)
3、 http://office.qingshanboke.com/Default.aspx?url=(输入你的文档在服务器中的地址)
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>标签是表格展示在想放的位置不用跳转页面
<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")