实现在线查看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>

实现在线查看PDF文件相关推荐

浏览器在线查看pdf文件 pdf.js的使用教程
谷歌浏览器可以直接在线查看pdf,而IE内核浏览器无法在线查看,默认是下载. 这里用到的是pdf.js,不仅支持IE内核浏览器,而且兼容手机查看pdf 官网地址:http://mozilla.gith ...
小程序webview实现在线查看pdf文件
long time no see,还是之前的webview项目新增需求,电子发票这块需要查看发票详情.针对这个需求,百度得出两种结论,一种是用小程序api调起文件,另一种是pdf插件.一开始我用的是p ...
h5移动端在线查看pdf文件预览pdf文件 pdfh5.js
要做移动端在线查看pdf的效果最后选择了 pdfh5.js 强烈点赞详情链接 https://www.gjtool.cn/articles/2019/09/04/15675716491 ...
PDM solideworks 达索在线查看PDF文件不完整的解决方式
pdf文件显示不完整 solidworks出工程图转PDF字体乱码不显示的问题百度的解决方式,在自己管理的PDM系统中这样的处理方式并未得到妥善解决.好歹哥们程序出身,架构也搞过一些.加工的部门的 ...
Office Web App2013 在线查看PDF文件
经常会有客户问,在SharePoint中,如何在浏览器中查看与编辑文档,通常给出的解决方案是集成Office Web App. 而在实际应用过程中,客户通常会要求实现PDF文件在线查看,对于PDF文件 ...
Android应用内在线查看PDF文件
下面介绍几种可行性较高的方案一.PDFView 这个比较早,有几年没更新了,但可以满足一般的需求,手势放大缩小,左右滑动,体积也较小,对于Android版本可以兼容到较低版本,缺点也比较明显,不能查 ...
java在线查看pdf文件,java 实现所有文件的在线查看（其他类型转pdf后用pdf.js显示）...
js显示pdf插件demo下载: http://download.csdn.net/detail/heqinghua217/9685857 java 吧所有文档类文件转成pdf格式文件下载 http: ...
php在线查看pdf文件
readfile.php <?php if(!function_exists('read_pdf')) { function read_pdf($file) { if(strtolower(su ...
基于Angularjs框架实现HTML5在线查看OFD文件
我们在系统开发过程中,经常会遇到图片浏览,PDF,OFD文件浏览问题. 最近正需要开发此功能,在线查看OFD文件.查阅各种资料发现,其实OFD和PDF是同一类型文件,OFD就是中国版本的PDF. 下面 ...

实现在线查看PDF文件

效果图：

使用方法

`jquery.media.js`

html

实现在线查看PDF文件相关推荐

最新文章

热门文章