最近遇到一個(gè)需求，要在html頁(yè)面查看pdf生成的pdf文件!

翻來(lái)覆去找到兩種辦法 ，最后采用了jquery.media.js插件

方式一

將pdf轉(zhuǎn)為圖片保存，然后再把圖片的地址發(fā)到頁(yè)面進(jìn)行顯示。

遇到的困難，pdf轉(zhuǎn)為圖片時(shí)中文可能會(huì)亂碼！
缺點(diǎn)：生成圖片會(huì)占用服務(wù)器內(nèi)存。

方式二

通過(guò)js插件在線預(yù)覽pdf （這里推薦第3中插件）

js插件有三種

1 pdf.js

下載地址

https://github.com/mozilla/pd...

提供兩種使用方式

PDF.js可以實(shí)現(xiàn)在html下直接瀏覽pdf文檔，是一款開(kāi)源的pdf文檔讀取解析插件，非常強(qiáng)大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個(gè)庫(kù)文件，一個(gè)pdf.js和一個(gè)pdf.worker.js，一個(gè)負(fù)責(zé)API解析，一個(gè)負(fù)責(zé)核心解析。

感興趣請(qǐng)查看這篇博客

https://www.cnblogs.com/zhang...

缺點(diǎn)

官網(wǎng)項(xiàng)目文件過(guò)多，不太容易理解。看著頭就大！

pdfobject.js

使用教程 http://www./jquery-in...

缺點(diǎn)

pdfobject.js 對(duì)瀏覽器有要求，可能出現(xiàn)不能加載pdf文件，今天我的谷歌瀏覽器上死活無(wú)法顯示pdf文件無(wú)賴又換了其他的。

可能會(huì)報(bào)錯(cuò)

not allow to load resource

3 jquery.media.js

簡(jiǎn)單輕量，引入js 然后加載路徑即可。

使用教程 http://www./jquery-in...

下載地址

jquery.media.rar（解壓密碼：www.crowsong.xyz）: http://waternote./f...

用法如下：

使用方法

引用所需兩個(gè)文件

使用方法

首先要引入js文件

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

其次添加頁(yè)面加載完畢后需要執(zhí)行的js代碼，以預(yù)覽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頁(yè)面中的a標(biāo)簽下href改為想要的pdf地址即可。