html中在線預覽pdf文件之pdf在線預覽插件 你的笑像一條狗


html中在線預覽pdf文件之pdf在線預覽插件
最近遇到一個需求,要在html頁面查看pdf生成的pdf文件!

翻來覆去找到兩種辦法 ,最后采用了jquery.media.js插件

方式一
將pdf轉為圖片保存,然后再把圖片的地址發到頁面進行顯示。

遇到的困難,pdf轉為圖片時中文可能會亂碼!
缺點:生成圖片會占用服務器內存。

方式二
通過js插件在線預覽pdf (這里推薦第3中插件)

js插件有三種

1 pdf.js
下載地址

https://github.com/mozilla/pdf.js

提供兩種使用方式

PDF.js可以實現在html下直接瀏覽pdf文檔,是一款開源的pdf文檔讀取解析插件,非常強大,能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件,一個pdf.js和一個pdf.worker.js,一個負責API解析,一個負責核心解析。

感興趣請查看這篇博客

https://www.cnblogs.com/zhanggf/p/8504317.html

缺點
官網項目文件過多,不太容易理解。看着頭就大!

2.pdfobject.js
使用教程 http://www.jq22.com/jquery-info649

缺點
pdfobject.js 對瀏覽器有要求,可能出現不能加載pdf文件,今天我的谷歌瀏覽器上死活無法顯示pdf文件無賴又換了其他的。

可能會報錯

not allow to load resource

3 jquery.media.js
簡單輕量,引入js 然后加載路徑即可。

使用教程 http://www.jq22.com/jquery-info19813

下載地址
jquery.media.rar(解壓密碼:www.crowsong.xyz): http://waternote.ctfile.net/fs/2276132-302019417

用法如下:

使用方法
引用所需兩個文件

使用方法
首先要引入js文件

其次添加頁面加載完畢后需要執行的js代碼,以預覽PDF為例:

最后添加HTML代碼:

將插件中HTML頁面中的a標簽下href改為想要的pdf地址即可。

作者:你的笑像一條狗
鏈接:https://www.jianshu.com/p/9d400d1574af
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM