1. 程式人生 > >8個實現線上瀏覽PDF檔案的實用jQuery外掛

8個實現線上瀏覽PDF檔案的實用jQuery外掛

在web開發當中我們經常需要進行需要線上瀏覽PDf內容,線上嵌入動態pdf,傳統的解決方法安裝客戶端PDF閱讀器,如果是在谷歌是可以線上瀏覽的,因為他自身就帶了一些外掛,以前遇到這樣的問題往往是費時又費力,很不好解決,

今天就給大家分享一系列使用javascript實現的pdf外掛效果,無需藉助第三方外掛就可以實現線上瀏覽功能,非常實用,

PDFObject

PDFobject可以幫助你在頁面直接嵌入pdf檔案,有時候有些專案需要動態地嵌入PDF檔案。PDFObject為此而設計的,他能夠快速和容易的嵌入PDF檔案,PDFObject使用JavaScript來產生相同的符合標準的<OBJECT>

標記,然後插入<OBJECT>到您的HTML元素的選擇。您可以填滿整個瀏覽器視窗,或將PDF格式轉換成一個<DIV>或其他塊級元素。

pdf.js

和 Google Chrome 使用的源自 Foxit 的閉源 PDF 瀏覽外掛不同,PDF.js 是基於開放的 HTML5 及 JavaScript 技術實現的開源產品

pdf.js 是一個主要用於HTML5 平臺上線上閱讀PDF文件的小外掛,基於JavaScript技術編寫而成,無需任何本地技術支援。

pdf.js是由Mozilla Labs釋出的。他們的目標是建立一個通用的,基於標準的網路平臺,能夠解析和渲染PDF檔案,並最終釋出一個PDF閱讀器擴充套件,毫無疑問 pdf.js 將被整合入 Gecko 成為 Firefox 的內嵌 PDF 閱讀器,但是具體整合時間表尚未確定

jsPDF

jsPDF

jsPDF 是一個使用Javascript語言生成PDF的開源庫。你可以在Firefox外掛,服務端指令碼或是瀏覽器指令碼中使用它。客戶端Safari 和 iPhone Safari 支援得最好,其次是Opera和Windows下的Firefox 3等。IE暫不支援。。

jQuery的媒體外掛

jQuery Media Plugin是一款基於jQuery的網頁媒體播放器外掛,它支援大部分的網路多媒體播放器和多媒體格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根據當前的指令碼配置,自動將a標籤替換成div,並生成object, embed甚至是iframe程式碼,至於生成object還是embed,jQuery Media會根據當前平臺自動判別,因此相容性方面非常出色下面這段程式碼是jQuery Media生成後的結果:

複製程式碼
 1 <div class="media">
 2     <object width="450" height="250" attr1="attrValue1" attr2="attrValue2"
 3         codebase="http://www.apple.com/qtactivex/qtplugin.cab"
 4         classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
 5         <param name="src"      value="myBetterMovie.mov">
 6         <param name="autoplay" value="true">
 7         <param name="param1"   value="paramValue1">
 8         <param name="param2"   value="paramValue2">
 9         <embed width="450" height="250" src="myBetterMovie.mov" autoplay="true"
10             attr1="attrValue1" attr2="attrValue2" param1="paramValue1" param2="paramValue2"
11             pluginspage="http://www.apple.com/quicktime/download/" > </embed>
12     </object>
13 </div>
複製程式碼

具體使用方法

html標記程式碼

1 <a class="media" href="sample.mov">My Quicktime Movie</a>
2 <a class="media" href="sample.swf">My Flash Movie</a>
3 <a class="media" href="sample.wma">My Audio File</a>
4 初始化指令碼:
5 1
6 $('.media').media();

谷歌文件的PDF閱讀器

ZOHO瀏覽器

Anychart:匯出為PDF使用JavaScript

下圖可以匯出為PNG或JPG格式的靜態影象或嵌入式靜態影象,圖表或一個完全互動的功能圖

jQuery的文件檢視器

Document Viewer是一個jQuery外掛,可以讓你在網頁中直接檢視多種檔案格式。文件瀏覽器支援的檔案格式:PDF檔案,文字檔案,程式碼,影象,音訊,視訊等。

轉自:http://www.cnblogs.com/58top/archive/2012/11/26/a-list-of-jquery-pdf-viewers-available-at-the-moment.html