实现在线查看PDF文件

效果图：

 

使用方法

引用所需两个文件

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 

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

jquery.media.js

;(function($){"use strict";var mode=document.documentMode||0;var msie=/MSIE/.test(navigator.userAgent);var lameIE=msie&&(/MSIE (6|7|8)\.0/.test(navigator.userAgent)||mode<9);$.fn.media=function(options,f1,f2){if(options=='undo'){return this.each(function(){var $this=$(this);var html=$this.data('media.origHTML');if(html)
$this.replaceWith(html);});}
return this.each(function(){if(typeof options=='function'){f2=f1;f1=options;options={};}
var o=getSettings(this,options);if(typeof f1=='function')f1(this,o);var r=getTypesRegExp();var m=r.exec(o.src.toLowerCase())||[''];var fn;if(o.type)
m[0]=o.type;else
m.shift();for(var i=0;i<m.length;i++){fn=m[i].toLowerCase();if(isDigit(fn[0]))fn='fn'+fn;if(!$.fn.media[fn])
continue;var player=$.fn.media[fn+'_player'];if(!o.params)o.params={};if(player){var num=player.autoplayAttr=='autostart';o.params[player.autoplayAttr||'autoplay']=num?(o.autoplay?1:0):o.autoplay?true:false;}
var $div=$.fn.media[fn](this,o);$div.css('backgroundColor',o.bgColor).width(o.width);if(o.canUndo){var $temp=$('<div></div>').append(this);$div.data('media.origHTML',$temp.html());}
if(typeof f2=='function')f2(this,$div[0],o,player.name);break;}});};$.fn.media.mapFormat=function(format,player){if(!format||!player||!$.fn.media.defaults.players[player])return;format=format.toLowerCase();if(isDigit(format[0]))format='fn'+format;$.fn.media[format]=$.fn.media[player];$.fn.media[format+'_player']=$.fn.media.defaults.players[player];};$.fn.media.defaults={standards:true,canUndo:true,width:400,height:400,autoplay:0,bgColor:'#ffffff',params:{wmode:'transparent'},attrs:{},flvKeyName:'file',flashvars:{},flashVersion:'7',expressInstaller:null,flvPlayer:'mediaplayer.swf',mp3Player:'mediaplayer.swf',silverlight:{inplaceInstallPrompt:'true',isWindowless:'true',framerate:'24',version:'0.9',onError:null,onLoad:null,initParams:null,userContext:null}};$.fn.media.defaults.players={flash:{name:'flash',title:'Flash',types:'flv,mp3,swf',mimetype:'application/x-shockwave-flash',pluginspage:'http://www.adobe.com/go/getflashplayer',ieAttrs:{classid:'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',type:'application/x-oleobject',codebase:'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='+$.fn.media.defaults.flashVersion}},quicktime:{name:'quicktime',title:'QuickTime',mimetype:'video/quicktime',pluginspage:'http://www.apple.com/quicktime/download/',types:'aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3gp',ieAttrs:{classid:'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',codebase:'http://www.apple.com/qtactivex/qtplugin.cab'}},realplayer:{name:'real',title:'RealPlayer',types:'ra,ram,rm,rpm,rv,smi,smil',mimetype:'audio/x-pn-realaudio-plugin',pluginspage:'http://www.real.com/player/',autoplayAttr:'autostart',ieAttrs:{classid:'clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'}},winmedia:{name:'winmedia',title:'Windows Media',types:'asx,asf,avi,wma,wmv',mimetype:isFirefoxWMPPluginInstalled()?'application/x-ms-wmp':'application/x-mplayer2',pluginspage:'http://www.microsoft.com/Windows/MediaPlayer/',autoplayAttr:'autostart',oUrl:'url',ieAttrs:{classid:'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6',type:'application/x-oleobject'}},img:{name:'img',title:'Image',types:'gif,png,jpg'},iframe:{name:'iframe',types:'html,pdf'},silverlight:{name:'silverlight',types:'xaml'}};function isFirefoxWMPPluginInstalled(){var plugs=navigator.plugins||[];for(var i=0;i<plugs.length;i++){var plugin=plugs[i];if(plugin['filename']=='np-mswmp.dll')
return true;}
return false;}
var counter=1;for(var player in $.fn.media.defaults.players){var types=$.fn.media.defaults.players[player].types;$.each(types.split(','),function(i,o){if(isDigit(o[0]))o='fn'+o;$.fn.media[o]=$.fn.media[player]=getGenerator(player);$.fn.media[o+'_player']=$.fn.media.defaults.players[player];});}
function getTypesRegExp(){var types='';for(var player in $.fn.media.defaults.players){if(types.length)types+=',';types+=$.fn.media.defaults.players[player].types;}
return new RegExp('\\.('+types.replace(/,/ig,'|')+')\\b');}
function getGenerator(player){return function(el,options){return generate(el,options,player);};}
function isDigit(c){return '0123456789'.indexOf(c)>-1;}
function getSettings(el,options){options=options||{};var a,n;var $el=$(el);var cls=el.className||'';var meta=$.metadata?$el.metadata():$.meta?$el.data():{};meta=meta||{};var w=meta.width||parseInt(((cls.match(/\bw:(\d+)/)||[])[1]||0),10)||parseInt(((cls.match(/\bwidth:(\d+)/)||[])[1]||0),10);var h=meta.height||parseInt(((cls.match(/\bh:(\d+)/)||[])[1]||0),10)||parseInt(((cls.match(/\bheight:(\d+)/)||[])[1]||0),10);if(w)meta.width=w;if(h)meta.height=h;if(cls)meta.cls=cls;var dataName='data-';for(var i=0;i<el.attributes.length;i++){a=el.attributes[i],n=$.trim(a.name);var index=n.indexOf(dataName);if(index===0){n=n.substring(dataName.length);meta[n]=a.value;}}
a=$.fn.media.defaults;var b=options;var c=meta;var p={params:{bgColor:options.bgColor||$.fn.media.defaults.bgColor}};var opts=$.extend({},a,b,c);$.each(['attrs','params','flashvars','silverlight'],function(i,o){opts[o]=$.extend({},p[o]||{},a[o]||{},b[o]||{},c[o]||{});});if(typeof opts.caption=='undefined')opts.caption=$el.text();opts.src=opts.src||$el.attr('href')||$el.attr('src')||'unknown';return opts;}
$.fn.media.swf=function(el,opts){var f,p;if(!window.SWFObject&&!window.swfobject){if(opts.flashvars){var a=[];for(f in opts.flashvars)
a.push(f+'='+opts.flashvars[f]);if(!opts.params)opts.params={};opts.params.flashvars=a.join('&');}
return generate(el,opts,'flash');}
var id=el.id?(' id="'+el.id+'"'):'';var cls=opts.cls?(' class="'+opts.cls+'"'):'';var $div=$('<div'+id+cls+'>');if(window.swfobject){$(el).after($div).appendTo($div);if(!el.id)el.id='movie_player_'+counter++;window.swfobject.embedSWF(opts.src,el.id,opts.width,opts.height,opts.flashVersion,opts.expressInstaller,opts.flashvars,opts.params,opts.attrs);}
else{$(el).after($div).remove();var so=new SWFObject(opts.src,'movie_player_'+counter++,opts.width,opts.height,opts.flashVersion,opts.bgColor);if(opts.expressInstaller)so.useExpressInstall(opts.expressInstaller);for(p in opts.params)
if(p!='bgColor')so.addParam(p,opts.params[p]);for(f in opts.flashvars)
so.addVariable(f,opts.flashvars[f]);so.write($div[0]);}
if(opts.caption)$('<div>').appendTo($div).html(opts.caption);return $div;};$.fn.media.flv=$.fn.media.mp3=function(el,opts){var src=opts.src;var player=/\.mp3\b/i.test(src)?opts.mp3Player:opts.flvPlayer;var key=opts.flvKeyName;src=encodeURIComponent(src);opts.src=player;opts.src=opts.src+'?'+key+'='+(src);var srcObj={};srcObj[key]=src;opts.flashvars=$.extend({},srcObj,opts.flashvars);return $.fn.media.swf(el,opts);};$.fn.media.xaml=function(el,opts){if(!window.Sys||!window.Sys.Silverlight){if($.fn.media.xaml.warning)return;$.fn.media.xaml.warning=1;alert('You must include the Silverlight.js script.');return;}
var props={width:opts.width,height:opts.height,background:opts.bgColor,inplaceInstallPrompt:opts.silverlight.inplaceInstallPrompt,isWindowless:opts.silverlight.isWindowless,framerate:opts.silverlight.framerate,version:opts.silverlight.version};var events={onError:opts.silverlight.onError,onLoad:opts.silverlight.onLoad};var id1=el.id?(' id="'+el.id+'"'):'';var id2=opts.id||'AG'+counter++;var cls=opts.cls?(' class="'+opts.cls+'"'):'';var $div=$('<div'+id1+cls+'>');$(el).after($div).remove();Sys.Silverlight.createObjectEx({source:opts.src,initParams:opts.silverlight.initParams,userContext:opts.silverlight.userContext,id:id2,parentElement:$div[0],properties:props,events:events});if(opts.caption)$('<div>').appendTo($div).html(opts.caption);return $div;};function generate(el,opts,player){var $el=$(el);var o=$.fn.media.defaults.players[player];var a,key,v;if(player=='iframe'){o=$('<iframe'+' width="'+opts.width+'" height="'+opts.height+'" >');o.attr('src',opts.src);o.css('backgroundColor',o.bgColor);}
else if(player=='img'){o=$('<img>');o.attr('src',opts.src);if(opts.width)
o.attr('width',opts.width);if(opts.height)
o.attr('height',opts.height);o.css('backgroundColor',o.bgColor);}
else if(lameIE){a=['<object width="'+opts.width+'" height="'+opts.height+'" '];for(key in opts.attrs)
a.push(key+'="'+opts.attrs[key]+'" ');for(key in o.ieAttrs||{}){v=o.ieAttrs[key];if(key=='codebase'&&window.location.protocol=='https:')
v=v.replace('http','https');a.push(key+'="'+v+'" ');}
a.push('></ob'+'ject'+'>');var p=['<param name="'+(o.oUrl||'src')+'" value="'+opts.src+'">'];for(key in opts.params)
p.push('<param name="'+key+'" value="'+opts.params[key]+'">');o=document.createElement(a.join(''));for(var i=0;i<p.length;i++)
o.appendChild(document.createElement(p[i]));}
else if(opts.standards){a=['<object type="'+o.mimetype+'" width="'+opts.width+'" height="'+opts.height+'"'];if(opts.src)a.push(' data="'+opts.src+'" ');if(msie){for(key in o.ieAttrs||{}){v=o.ieAttrs[key];if(key=='codebase'&&window.location.protocol=='https:')
v=v.replace('http','https');a.push(key+'="'+v+'" ');}}
a.push('>');a.push('<param name="'+(o.oUrl||'src')+'" value="'+opts.src+'">');for(key in opts.params){if(key=='wmode'&&player!='flash')
continue;a.push('<param name="'+key+'" value="'+opts.params[key]+'">');}
a.push('<div><p><strong>'+o.title+' Required</strong></p><p>'+o.title+' is required to view this media. <a href="'+o.pluginspage+'">Download Here</a>.</p></div>');a.push('</ob'+'ject'+'>');}
else{a=['<embed width="'+opts.width+'" height="'+opts.height+'" style="display:block"'];if(opts.src)a.push(' src="'+opts.src+'" ');for(key in opts.attrs)
a.push(key+'="'+opts.attrs[key]+'" ');for(key in o.eAttrs||{})
a.push(key+'="'+o.eAttrs[key]+'" ');for(key in opts.params){if(key=='wmode'&&player!='flash')
continue;a.push(key+'="'+opts.params[key]+'" ');}
a.push('></em'+'bed'+'>');}
var id=el.id?(' id="'+el.id+'"'):'';var cls=opts.cls?(' class="'+opts.cls+'"'):'';var $div=$('<div'+id+cls+'>');$el.after($div).remove();if(lameIE||player=='iframe'||player=='img')
$div.append(o);else
$div.html(a.join(''));if(opts.caption)
$('<div>').appendTo($div).html(opts.caption);return $div;}})(jQuery);

 html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script> 
         <script type="text/javascript" src="js/jquery.media.js"></script>
	</head>
	<script>
		$(function() {  
		    $('a.media').media({width:$(document.body).width(), height:window.innerHeight});  
		});
	</script>
	<body>
		<div class="panel-body">
         <a class="media" href="PDF/2018.pdf"></a>  
       </div>
	</body>
</html>