利用PDF.js實現pdf預覽遇到的坑(使用碼雲託管pdf筆記)

本人在工作和學習中,會寫一些筆記文檔(word格式的),爲了閱讀的方便,我之前的做法是把word轉出html格式的文檔,然後上傳到github進行託管,然後利用github靜態網站進行對外開放訪問,這樣在電腦端和手機端都能看到筆記,但缺點是筆記中的圖片變得很模糊(因爲github對圖片壓縮過)和訪問速度過慢,所以放棄了github而轉向碼雲,把word形式的筆記轉成pdf(wps免費轉)後上傳到碼雲託管,利用碼雲的靜態網站對外開放,實現手機端和電腦端閱讀。

 

前期知識:1 會一點html和javascript

                  2 會git命令(github)

 

要實現pdf文檔能在電腦端和手機端上閱讀,需要使用到PDF.js,下載地址如下:

http://zxy15914507674.gitee.io/shared_resource_name/PDF.js相關資源文件.rar

資源結構如下:

 

使用PDF.js實現pdf文件預覽非常簡單,只需要在html中嵌入一個iframe標籤即可:

<html>
<iframe src="你的服務器對外的地址或者碼雲靜態網站對外的地址/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>
</html>

但是需要注意的是,把下載的資源中build文件夾和web文件夾全部原封不動地上傳到網站的根目錄或者碼雲上並啓動對外開放,至於如何在碼雲上啓動靜態網站,可以參考:

https://blog.csdn.net/zhangyu4863/article/details/80473412?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-5&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-5

 

下面分析我遇到的坑:

1  所有的資源文件(build文件夾和web文件夾下的文件)都必須部署在網站上

2  上面的iframe標籤中的src屬性:

src屬性中地址必須是使用網站的全路徑,src屬性中的第一部分我之前使用相對路徑和沒有部署到網站上,直接就報錯不顯示,src屬性中的第二部分我之前也是使用相對路徑,然後就出現電腦端可以顯示,到手機端上提示無法加載pdf文檔

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章