jquery在线预览PDF文件，打开PDF文件

最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。

核心代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Online View PDF</title>
<script type="text/javascript" src="http://sources.ikeepstudying.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.media.js"></script>
<script type="text/javascript">$(function() {$('a.media').media({width:800, height:600});});
</script>
</head><body>
<a class="media" href="guice.pdf">PDF File</a>
</body>
</html>

查看预览：http://sources.ikeepstudying.com/jquery.media/pdf.php

使用jquery.media.js就可以直接把一个连接到pdf文件的链接打开，满足了需求。

项目地址：http://jquery.malsup.com/media/

或者复制下面的代码：（Jun 5, 2013）

jquery.media.js

/** jQuery Media Plugin for converting elements into rich media content.** Examples and documentation at: http://malsup.com/jquery/media/* Copyright (c) 2007-2010 M. Alsup* Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php* http://www.gnu.org/licenses/gpl.html** @author: M. Alsup* @version: 0.99 (05-JUN-2013)* @requires jQuery v1.1.2 or later* $Id: jquery.media.js 2460 2007-07-23 02:53:15Z malsup $** Supported Media Players:*  - Flash*    - Quicktime*    - Real Player*  - Silverlight*  - Windows Media Player* - iframe** Supported Media Formats:*     Any types supported by the above players, such as:*     Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp*    Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma*  Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml** Thanks to Mark Hicken and Brent Pedersen for helping me debug this on the Mac!* Thanks to Dan Rossi for numerous bug reports and code bits!* Thanks to Skye Giordano for several great suggestions!* Thanks to Richard Connamacher for excellent improvements to the non-IE behavior!*/
/*global SWFObject alert Sys */
/*jshint forin:false */
;(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);/*** Chainable method for converting elements into rich media.** @param options* @param callback fn invoked for each matched element before conversion* @param callback fn invoked for each matched element after conversion*/
$.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);// pre-conversion callback, passes original element and fully populated optionsif (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;elsem.shift();for (var i=0; i < m.length; i++) {fn = m[i].toLowerCase();if (isDigit(fn[0])) fn = 'fn' + fn; // fns can't begin with numbersif (!$.fn.media[fn])continue;  // unrecognized media type// normalize autoplay settingsvar 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()); // store original markup}// post-conversion callback, passes original element, new div element and fully populated optionsif (typeof f2 == 'function') f2(this, $div[0], o, player.name);break;}});
};/*** Non-chainable method for adding or changing file format / player mapping* @name mapFormat* @param String format File format extension (ie: mov, wav, mp3)* @param String player Player name to use for the format (one of: flash, quicktime, realplayer, winmedia, silverlight or iframe*/
$.fn.media.mapFormat = function(format, player) {if (!format || !player || !$.fn.media.defaults.players[player]) return; // invalidformat = format.toLowerCase();if (isDigit(format[0])) format = 'fn' + format;$.fn.media[format] = $.fn.media[player];$.fn.media[format+'_player'] = $.fn.media.defaults.players[player];
};// global defautls; override as needed
$.fn.media.defaults = {standards:  true,       // use object tags only (no embeds for non-IE browsers)canUndo:    true,       // tells plugin to store the original markup so it can be reverted via: $(sel).mediaUndo()width:      400,height:     400,autoplay:   0,          // normalized cross-player settingbgColor:  '#ffffff',  // background colorparams:      { wmode: 'transparent'},    // added to object element as param elements; added to embed element as attrsattrs:     {},         // added to object and embed elements as attrsflvKeyName: 'file',       // key used for object src param (thanks to Andrea Ercolino)flashvars:  {},         // added to flash content as flashvars param/attrflashVersion:  '7',    // required flash versionexpressInstaller: null,    // src for express installer// default flash video and mp3 player (@see: http://jeroenwijering.com/?item=Flash_Media_Player)flvPlayer:   'mediaplayer.swf',mp3Player:    'mediaplayer.swf',// @see http://msdn2.microsoft.com/en-us/library/bb412401.aspxsilverlight: {inplaceInstallPrompt: 'true', // display in-place install prompt?isWindowless:         'true', // windowless mode (false for wrapping markup)framerate:            '24',   // maximum framerateversion:            '0.9',  // Silverlight versiononError:              null,   // onError callbackonLoad:                  null,   // onLoad callbackinitParams:           null,   // object init paramsuserContext:       null    // callback arg passed to the load callback}
};// Media Players; think twice before overriding
$.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'}},// special casesimg: {name:  'img',title: 'Image',types: 'gif,png,jpg'},iframe: {name:  'iframe',types: 'html,pdf'},silverlight: {name:  'silverlight',types: 'xaml'}
};//
//  everything below here is private
//// detection script for FF WMP plugin (http://www.therossman.org/experiments/wmp_play.html)
// (hat tip to Mark Ross for this script)
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;
}// flatten all possible options: global defaults, meta, option obj
function getSettings(el, options) {options = options || {};var a, n;var $el = $(el);var cls = el.className || '';// support metadata plugin (v1.0 and v2.0)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;// crank html5 style data attributesvar 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();// make sure we have a source!opts.src = opts.src || $el.attr('href') || $el.attr('src') || 'unknown';return opts;
}//
//  Flash Player
//// generate flash using SWFObject library if possible
$.fn.media.swf = function(el, opts) {var f, p;if (!window.SWFObject && !window.swfobject) {// roll our ownif (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 + '>');// swfobject v2+if (window.swfobject) {$(el).after($div).appendTo($div);if (!el.id) el.id = 'movie_player_' + counter++;// replace el with swfobject contentwindow.swfobject.embedSWF(opts.src, el.id, opts.width, opts.height, opts.flashVersion,opts.expressInstaller, opts.flashvars, opts.params, opts.attrs);}// swfobject < v2else {$(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;
};// map flv and mp3 files to the swf player by default
$.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);
};//
//  Silverlight
//
$.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++;// convert element to divvar 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;
};//
// generate object/embed markup
//
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) {// Rewritten to be standards compliant by Richard Connamachera = ['<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') // FF3/Quicktime borks on wmodecontinue;a.push('<param name="'+ key +'" value="' + opts.params[key] + '">');}// Alternate HTMLa.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') // FF3/Quicktime borks on wmodecontinue;a.push(key + '="'+opts.params[key]+'" ');}a.push('></em'+'bed'+'>');}   // convert element to divvar 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);

jquery在线预览PDF文件，打开PDF文件相关推荐

java实现文件下载，批量下载，文件在线预览，word转pdf，excel转pdf
pdf,excel转word所需jar包网盘链接提取码:4gmw 目录 1.在resources下新建license.xml 2.文件转换工具类 3.文件下载 4.批量下载 5.在线打开文件 ...
【板栗糖GIS】怎么将网络上只能在线预览文档另存为pdf（插件篇）
怎么将网络上只能在线预览文档另存为pdf(插件篇) 目录 1.使用插件,这里推荐FireShot,好用免费 2.安装该插件的方式 3.打开在线预览文档的网址 4.点击插件-截取整个页面并且-另存为pd ...
java word转pdf linux_java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）...
背景之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...
java word在线预览_java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）...
背景之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...
关于在线预览word,excel,ppt,pdf的需求处理方法。
参考文档:http://www.cnblogs.com/wolf-sun/p/3574278.html 我选用的方案:先用office com组件生成pdf,然后使用pdf.js在线预览pdf文档.在 ...
wps在线浏览 java_java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）...
varqtpath= '${qtpath}';varfileName= '${fileName}'; PDF.js viewer varDEFAULT_URL= "";//注意,删 ...
pdf文件在线预览，兼容多浏览器和手机端
前言最近学习了一下网页在线预览pdf文件的实现方式,主要有: PDFObject:使用起来非常方便,电脑端兼容性好,试过能兼容ie9,也很快,但在手机上一些浏览器无法在线. jquery.media ...
jquery 快速预览pdf 文件
jquery在线预览PDF文件,打开PDF文件 jquery.media.js /** jQuery Media Plugin for converting elements into rich me ...
pdf.js使用（在线预览pdf文件）
最近公司需要pdf在线预览,于是找到pdf.js这个插件 , 好处就在于 pc端和移动端不需要花过多的精力去调. 1:需要到官网下载源码:https://mozilla.github.io/pdf. ...

jquery在线预览PDF文件，打开PDF文件

jquery在线预览PDF文件，打开PDF文件相关推荐

最新文章

热门文章