html中線上預覽pdf檔案之pdf線上預覽外掛

你笑的像一條狗發表於2019-01-31
HTML

html中線上預覽pdf檔案之pdf線上預覽外掛

最近遇到一個需求，要在html頁面檢視pdf生成的pdf檔案!

翻來覆去找到兩種辦法 ，最後採用了jquery.media.js外掛

方式一

將pdf轉為圖片儲存，然後再把圖片的地址發到頁面進行顯示。

遇到的困難，pdf轉為圖片時中文可能會亂碼！ 缺點：生成圖片會佔用伺服器記憶體。

方式二

通過js外掛線上預覽pdf （這裡推薦第3中外掛）

js外掛有三種

1 pdf.js

下載地址

github.com/mozilla/pdf…

提供兩種使用方式

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

感興趣請檢視這篇部落格

www.cnblogs.com/zhanggf/p/8…

缺點

官網專案檔案過多，不太容易理解。看著頭就大！

pdfobject.js

使用教程 www.jq22.com/jquery-info…

缺點

pdfobject.js 對瀏覽器有要求，可能出現不能載入pdf檔案，今天我的谷歌瀏覽器上死活無法顯示pdf檔案無賴又換了其他的。

可能會報錯

not allow to load resource

3 jquery.media.js

簡單輕量，引入js 然後載入路徑即可。

使用教程 www.jq22.com/jquery-info…

下載地址

jquery.media.rar（解壓密碼：www.crowsong.xyz）: waternote.ctfile.net/fs/2276132-…

用法如下：

使用方法

引用所需兩個檔案

使用方法

首先要引入js檔案

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>  
<script type="text/javascript" src="jquery.media.js"></script>

複製程式碼

其次新增頁面載入完畢後需要執行的js程式碼，以預覽PDF為例：

<script type="text/javascript">
       $(function() {
           $('a.media').media({width:'100%', height:900px;});
       });
</script>
複製程式碼

最後新增HTML程式碼：

<div class="panel-body">
    <a class="media" href="/2883353877031485959.pdf"></a>
</div>
複製程式碼

將外掛中HTML頁面中的a標籤下href改為想要的pdf地址即可。

相關文章