×

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

牛大兵 牛大兵 发表于2023-04-07 10:56:29 浏览1936 评论0

抢沙发发表评论

一个快速的解决方法:

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

现附上两个在线预览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")