pdf在线预览

在线预览PDF主要依赖JQ的media框架，所以html代码很简洁，只需要一个a标签，href链接到pdf文件即可！

<a href="pdf文件" class="media" ></a>

导入JQ和jquery.media.js

$(function() {  
    $('a.media').media({width:800, height:600});  
});

以下为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);