【html】xlsx文件實現預覽，瀏覽器實現xlsx文件的預覽，前端實現xlsx文件的預覽

 

這里接，java生成超大xlsx文件，並上傳至騰訊雲的文章https://www.cnblogs.com/sxdcgaq8080/p/11661009.html

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

實現xlsx文件預覽的快速的解決方案，使用微軟提供的接口地址，直接拼接自己文件的url即可

【注意：本方法需要注意文檔如果具有保密性，謹慎使用】

【因為文件url是直接暴露給微軟】

 【http://view.officeapps.live.com/op/view.aspx?src=要查看的文檔地址】

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

 

如果拼接完后，使用微軟xlsx預覽訪問報錯如下：

An error occurred

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

 

 

 

 

就認真看完下面的解決步驟：

 

 

 

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

微軟接口實現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 兩種方式】

可使用的線上工具地址：

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

 

 

 

或者使用js轉化：

參考地址：

https://www.cnblogs.com/lvmylife/p/7595036.html

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標簽或者直接訪問即可進行預覽

<a href="寫自己可預覽的地址">預覽</a>

 

 

 5.最后附上微軟官網說明文檔

微軟官網說明文檔：https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

查看docx文檔：http://view.officeapps.live.com/op/view.aspx?src=newteach.pbworks.com%2Ff%2Fele%2Bnewsletter.docx

查看xlsx文檔：http://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Flearn.bankofamerica.com%2Fcontent%2Fexcel%2FWedding_Budget_Planner_Spreadsheet.xlsx

查看PPT文檔：http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx

 

 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地址中是比較正常的，沒有特殊符號的路徑。

　　本點附錄：spring項目和springboot項目 分別獲取根路徑的方式

 

 

 

 

 

 

 

=================================附件：收集到的方法：【供參考使用】==========================================

 

 

1.瀏覽器預覽xlsx插件介紹
https://www.cnblogs.com/it365box/p/11151933.html

 

2.xlsx轉pdf，使用pdf.js實現預覽
http://blog.lookpeakfans.xyz/2018/07/22/preview-pdf/

3.這里面有完整的訪問地址使用
https://www.cnblogs.com/huangtailang/p/76492af9d30087d8659d8d5400d20fc7.html

如果你要預覽的是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=

 

微軟官網說明文檔：
https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

 

可以直接下載的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）使用各種商業產品, 優點是不用操心, 簡單; 缺點是需要付費(如果這也算的話)以及保密性問題(可能也不算)