html访问xlsx文件,【html】xlsx文件实现预览,浏览器实现xlsx文件的预览,前端实现xlsx文件的预览...

=====================================================

实现xlsx文件预览的快速的解决方案,使用微软提供的接口地址,直接拼接自己文件的url即可

【注意:本方法需要注意文档如果具有保密性,谨慎使用】

【因为文件url是直接暴露给微软】

===========================================================================================================================

如果拼接完后,使用微软xlsx预览访问报错如下:

An error occurred

We're sorry, but for some reason we can't open this for you.

868c6b47bce7c67ca0c6d38c40fa00e9.png

就认真看完下面的解决步骤:

=================================================================================

微软接口实现xlsx文件浏览器预览实现步骤

1.首先你的xlsx文件得有一个可下载的url地址

http://offline-trade-1256468630.cos.ap-beijing.myqcloud.com/promotion/dev/%E4%BF%83%E9%94%80%E5%95%86%E5%93%81%E6%95%B0%E6%8D%AE-2019122414390201.xlsx?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDPhojU3JwCLI4e3rLF7QjtvyscAWloJbj%26q-sign-time%3D1577169548%3B1892529548%26q-key-time%3D1577169548%3B1892529548%26q-header-list%3D%26q-url-param-list%3D%26q-signature%3Ddfa559c3a7af248b343e44b1e8d238e6fa4f1591

2.需要将url地址进行UrlEncode编码的转化【工具或js 两种方式】

可使用的线上工具地址:

fb63e8b0c507e86fa8702a48b7f60ef0.png

或者使用js转化:

参考地址:

var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";

encodeURIComponent(url) --> http%3A%2F%2Flocalhost%3A8080%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa

转化得到结果如下:

http%3A%2F%2Foffline-trade-1256468630.cos.ap-beijing.myqcloud.com%2Fpromotion%2Fqtest%2F%25E4%25BF%2583%25E9%2594%2580%25E5%2595%2586%25E5%2593%2581%25E6%2595%25B0%25E6%258D%25AE-2019122511191501.xlsx%3Fsign%3Dq-sign-algorithm%253Dsha1%2526q-ak%253DAKIDPhojU3JwCLI4e3rLF7QjtvyscAWloJbj%2526q-sign-time%253D1577244125%253B1892604125%2526q-key-time%253D1577244125%253B1892604125%2526q-header-list%253D%2526q-url-param-list%253D%2526q-signature%253Dce132453576e5f813257329e1ef62c14dff3271a

3.再将转化完的url进行拼接,得到可预览地址

http://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Foffline-trade-1256468630.cos.ap-beijing.myqcloud.com%2Fpromotion%2Fqtest%2F%25E4%25BF%2583%25E9%2594%2580%25E5%2595%2586%25E5%2593%2581%25E6%2595%25B0%25E6%258D%25AE-2019122511191501.xlsx%3Fsign%3Dq-sign-algorithm%253Dsha1%2526q-ak%253DAKIDPhojU3JwCLI4e3rLF7QjtvyscAWloJbj%2526q-sign-time%253D1577244125%253B1892604125%2526q-key-time%253D1577244125%253B1892604125%2526q-header-list%253D%2526q-url-param-list%253D%2526q-signature%253Dce132453576e5f813257329e1ef62c14dff3271a

4.将可预览地址放在a标签或者直接访问即可进行预览

预览

3c4204529abd767fa0fff95afc18947b.png

5.最后附上微软官网说明文档

6.还有问题,看这里

6.1 按照上述步骤完成后,预览依旧报错如An error occurred,

这个时候,就要去看看 是不是转码之前的 url地址中有一些特殊的符号或子字符串之类的。

例如,我碰到的问题就是,可以直接下载的url地址是有的,但是这个url地址是spring boot打包成Jar包服务时候获取的Jar目录作为根路径,所以我的这个url地址中包含了.jar字样,

导致的结果就是:1>url直接下载xlsx文件没有问题

2>url地址调用encodeURIComponent(url)转码也不会报错

3>但是将转码后的url拼接在预览地址后,进行预览,就会报错:  An error occurred

4>最后排查出来,是因为我的可下载的url地址中 包含了spring boot打包jar的名字,所以就采用了 新的方式获取spring boot根路径作为生成的临时xlsx文件的路径,保证了生成的可下载的url地址中是比较正常的,没有特殊符号的路径。

=================================附件:收集到的方法:【供参考使用】==========================================

如果你要预览的是Excel,只需要在你的下载链接前面拼上

微软方案:http://view.officeapps.live.com/op/view.aspx?src=你的链接 即可预览

谷歌方案:https://docs.google.com/viewer?url=你的链接 即可预览

中文方案:http://view.gokuai.com/op/view.aspx?src=

第二方案:http://sg1b-excel.officeapps.live.com/x/_layouts/xlviewerinternal.aspx?ui=zh-CN&rs=zh-CN&WOPISrc=

可以直接下载的xlsx地址:

http://offline-trade-1256468630.cos.ap-beijing.myqcloud.com/promotion/dev/%E4%BF%83%E9%94%80%E5%95%86%E5%93%81%E6%95%B0%E6%8D%AE-2019122414390201.xlsx?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDPhojU3JwCLI4e3rLF7QjtvyscAWloJbj%26q-sign-time%3D1577169548%3B1892529548%26q-key-time%3D1577169548%3B1892529548%26q-header-list%3D%26q-url-param-list%3D%26q-signature%3Ddfa559c3a7af248b343e44b1e8d238e6fa4f1591

URL的UrlEncode编码转化的地址:

http://www.jsons.cn/urlencode/

可预览的地址:

http://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Foffline-trade-1256468630.cos.ap-beijing.myqcloud.com%2Fpromotion%2Fqtest%2F%25E4%25BF%2583%25E9%2594%2580%25E5%2595%2586%25E5%2593%2581%25E6%2595%25B0%25E6%258D%25AE-2019122511191501.xlsx%3Fsign%3Dq-sign-algorithm%253Dsha1%2526q-ak%253DAKIDPhojU3JwCLI4e3rLF7QjtvyscAWloJbj%2526q-sign-time%253D1577244125%253B1892604125%2526q-key-time%253D1577244125%253B1892604125%2526q-header-list%253D%2526q-url-param-list%253D%2526q-signature%253Dce132453576e5f813257329e1ef62c14dff3271a

4.总结

1)office -> pdf -> swf, 然后使用 flash 控件展示, 优点是支持 ie 低版本; 缺点是转换真 tm 麻烦, 而且不支持移动端

2)office -> pdf, 然后使用 pdf.js 预览, 优点是比较美观, 少了一道转换程序, 缺点是不支持 ie9 以下

3)使用 Office 提供的 Server, 优点是不用复杂的转换, 缺点是需要部署服务, 个人觉得极其麻烦

4)使用各种商业产品, 优点是不用操心, 简单; 缺点是需要付费(如果这也算的话)以及保密性问题(可能也不算)

来源:https://www.cnblogs.com/sxdcgaq8080/p/12097835.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值