转载:http://justcoding.iteye.com/blog/2163072
最主要的是使用到了一个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 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; // fns can't begin with numbers
- if (!$.fn.media[fn])
- continue; // unrecognized media type
- // normalize autoplay settings
- 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()); // store original markup
- }
- // post-conversion callback, passes original element, new div element and fully populated options
- if (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; // invalid
- 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];
- };
- // 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 setting
- bgColor: '#ffffff', // background color
- params: { wmode: 'transparent'}, // added to object element as param elements; added to embed element as attrs
- attrs: {}, // added to object and embed elements as attrs
- flvKeyName: 'file', // key used for object src param (thanks to Andrea Ercolino)
- flashvars: {}, // added to flash content as flashvars param/attr
- flashVersion: '7', // required flash version
- expressInstaller: 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.aspx
- silverlight: {
- inplaceInstallPrompt: 'true', // display in-place install prompt?
- isWindowless: 'true', // windowless mode (false for wrapping markup)
- framerate: '24', // maximum framerate
- version: '0.9', // Silverlight version
- onError: null, // onError callback
- onLoad: null, // onLoad callback
- initParams: null, // object init params
- userContext: 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 cases
- img: {
- 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 attributes
- 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();
- // 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 own
- 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 + '>');
- // swfobject v2+
- if (window.swfobject) {
- $(el).after($div).appendTo($div);
- if (!el.id) el.id = 'movie_player_' + counter++;
- // replace el with swfobject content
- window.swfobject.embedSWF(opts.src, el.id, opts.width, opts.height, opts.flashVersion,
- opts.expressInstaller, opts.flashvars, opts.params, opts.attrs);
- }
- // swfobject < v2
- 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;
- };
- // 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 div
- 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;
- };
- //
- // 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 Connamacher
- 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') // FF3/Quicktime borks on wmode
- continue;
- a.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
- }
- // Alternate HTML
- 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') // FF3/Quicktime borks on wmode
- continue;
- a.push(key + '="'+opts.params[key]+'" ');
- }
- a.push('></em'+'bed'+'>');
- }
- // convert element to div
- 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);
相关推荐
在线预览PDF文档,实际上是通过在浏览器中渲染PDF内容来实现的,而不是下载整个文件到本地。这样可以提供更好的用户体验,尤其是在查看大文件或频繁查看不同PDF时。 要使用jQuery实现这一功能,我们需要借助一些...
在当今互联网技术日新月异的时代,用户对于网页体验的要求越来越高,其中在线预览PDF文件成为了一项重要的功能需求。jQuery Media插件应运而生,它专门针对PDF文件的在线预览提供了一套便捷的解决方案。本文将深入...
总结来说,"jquery.media在线预览pdf文件"这个主题涵盖了使用jQuery和jQuery.media插件来实现PDF在线预览的基本步骤。然而,考虑到技术的演进,开发者应当考虑使用HTML5原生支持或更现代的解决方案,以确保更好的...
9. **测试和调试**:在实际项目中,使用`jquery.media.js`预览PDF文件时,需要进行充分的测试,确保在各种浏览器和设备上都能正常工作。开发者可以利用Chrome开发者工具、Firefox开发者版等工具进行调试。 总结,`...
EZView.js是一个基于jQuery的高效插件,专门设计用于提供图片和PDF文件的在线预览功能。它使得用户无需下载文件即可在网页上查看PDF文档和多种图片格式,极大地提升了用户体验。支持的文件类型包括PDF(Portable ...
jQuery Zoho Viewer是一款强大的文档预览插件,它允许用户在浏览器内直接预览各种类型的文档,包括但不限于PDF、Word、Excel、PPT等,无需下载或安装额外的软件。该插件由Zoho公司提供,与Zoho Docs服务紧密集成,...
一款用于pdf文件在线预览的插件
标题中的“jQuery点击弹出窗口放大图片和PDF文件预览插件”是一个基于jQuery的前端解决方案,用于在用户点击元素时展示图片或PDF文件的预览。这种功能常见于网页中,提供用户友好的交互体验,例如查看产品详情或阅读...
总结来说,`jQuery网页版PDF在线预览代码`是一个使用jQuery和可能的PDF.js库来实现在网页上预览PDF文件的解决方案。通过点击文字标题,用户可以方便地查看PDF文档,提升浏览体验。项目包括主要的代码文件和一份说明...
3. **初始化插件**:使用`.media()`方法初始化JQuery Media Plugin,将预览的PDF文件URL作为参数传递。 4. **配置选项**:根据需求,可以设置一些插件选项,如预览的宽度、高度、是否显示下载按钮等。 5. **事件...
jquery实现网页在线预览pdf文件的js包,使用简单只需引入该js文件,并在页面添加(完美高清中文版).pdf"></a> 即可
在现代Web开发中,预览PDF文件是一项常见的需求,尤其对于提供在线文档服务的网站来说更是必不可少。"全端兼容的前端H5预览PDF插件"为开发者提供了一个便捷的解决方案,它允许用户在PC和移动设备上无缝地查看PDF文档...
jQuery Media插件就是这样一个优秀的解决方案,它专门设计用于在各种浏览器环境下,包括IE各个版本、火狐以及谷歌浏览器中,流畅地显示PDF文件。 jQuery Media插件是基于流行的JavaScript库jQuery构建的,旨在增强...
4. **预览PDF**:预览PDF文件则复杂一些,因为浏览器对PDF的原生支持有限。一种常见方法是使用`<iframe>`加载PDF.js库,这是一个开源项目,能够将PDF解析成可渲染的HTML5 Canvas元素。首先,需要在服务器上部署PDF....
而预览PDF文件,可能用到的是Apache PDFBox或者iText库,它们能够读取和解析PDF内容。 3. **文件流处理** 在线预览涉及到文件流的处理,服务器需要将文件内容转化为可以在浏览器中显示的格式,如HTML或图片。这...
本文将详细介绍六种在前端实现在线预览pdf、word、xls、ppt等文件的方法。 首先,最传统也是最简单的方法是使用HTML的`<a>`标签。通过设置`href`属性指向文件的URL,用户点击链接后浏览器会自动打开或下载文件。...
一款用于实现预览pdf的插件
它可以解析PDF文件并将其转换为可操作的像素,使得在没有PDF阅读器插件的情况下也能预览PDF。在微信浏览器中,由于安全和隐私的考虑,可能需要使用这种库来避免直接链接到PDF文件。 3. **手势识别**:为了实现手势...
在现代Web应用中,将PDF文件直接在前端页面展示给用户是一种常见的需求,尤其是在文档分享、在线阅读和教育领域。本篇文章将详细讲解如何利用给定的`touchpdf-master`压缩包来实现这一功能。 首先,`touchpdf-...