jquery在线预览PDF文件，打开PDF文件 - Just Code - ITeye技术网站
博客分类：
最主要的是使用到了一个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/ charset=UTF-8"/&
&title&Online View PDF&/title&
&script type="text/javascript" src="/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});
&a class="media" href="guice.pdf"&PDF File&/a&
查看预览：
使用jquery.media.js就可以直接把一个连接到pdf文件的链接打开，满足了需求。
项目地址：
或者复制下面的代码：（Jun 5, 2013）
jquery.media.js
* jQuery Media Plugin for converting elements into rich media content.
* Examples and documentation at: /jquery/media/
* Copyright (c)
* 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 -23 02:53:15Z malsup $
* Supported Media Players:
* - 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');
$this.replaceWith(html);
return this.each(function() {
if (typeof options == 'function') {
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()) || [''];
if (o.type)
m.shift();
for (var i=0; i & m. i++) {
fn = m[i].toLowerCase();
if (isDigit(fn[0])) fn = 'fn' + // fns can't begin with numbers
if (!$.fn.media[fn])
// 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 :
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);
* 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]) // invalid
format = format.toLowerCase();
if (isDigit(format[0])) format = 'fn' +
$.fn.media[format] = $.fn.media[player];
$.fn.media[format+'_player'] = $.fn.media.defaults.players[player];
// override as needed
$.fn.media.defaults = {
standards:
// use object tags only (no embeds for non-IE browsers)
// tells plugin to store the original markup so it can be reverted via: $(sel).mediaUndo()
autoplay: 0,
// normalized cross-player setting
bgColor: '#ffffff', // background color
{ wmode: 'transparent'}, // added to object eleme added to embed element as 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: /?item=Flash_Media_Player)
flvPlayer:
'mediaplayer.swf',
mp3Player:
'mediaplayer.swf',
// @see /en-us/library/bb412401.aspx
silverlight: {
inplaceInstallPrompt: 'true', // display in-place install prompt?
isWindowless:
'true', // windowless mode (false for wrapping markup)
framerate:
// maximum framerate
// Silverlight version
// onError callback
// onLoad callback
initParams:
// object init params
userContext:
// callback arg passed to the load callback
// Media P think twice before overriding
$.fn.media.defaults.players = {
'flv,mp3,swf',
'application/x-shockwave-flash',
pluginspage: '/go/getflashplayer',
ieAttrs: {
'clsid:d27cdb6e-ae6d-11cf-96b8-',
'application/x-oleobject',
codebase: '/pub/shockwave/cabs/flash/swflash.cab#version=' + $.fn.media.defaults.flashVersion
quicktime: {
'quicktime',
'QuickTime',
'video/quicktime',
pluginspage: '/quicktime/download/',
'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: {
'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
codebase: '/qtactivex/qtplugin.cab'
realplayer: {
'RealPlayer',
'ra,ram,rm,rpm,rv,smi,smil',
'audio/x-pn-realaudio-plugin',
pluginspage:
'/player/',
autoplayAttr: 'autostart',
ieAttrs: {
classid: 'clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
winmedia: {
'winmedia',
'Windows Media',
'asx,asf,avi,wma,wmv',
isFirefoxWMPPluginInstalled() ? 'application/x-ms-wmp' : 'application/x-mplayer2',
pluginspage:
'/Windows/MediaPlayer/',
autoplayAttr: 'autostart',
ieAttrs: {
'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6',
'application/x-oleobject'
// special cases
title: 'Image',
types: 'gif,png,jpg'
types: 'html,pdf'
silverlight: {
'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. i++) {
var plugin = plugs[i];
if (plugin['filename'] == 'np-mswmp.dll')
var counter = 1;
for (var player in $.fn.media.defaults.players) {
var types = $.fn.media.defaults.players[player].
$.each(types.split(','), function(i,o) {
if (isDigit(o[0])) o = 'fn' +
$.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].
return new RegExp('\\.(' + types.replace(/,/ig,'|') + ')\\b');
function getGenerator(player) {
return function(el, options) {
return generate(el, options, player);
function isDigit(c) {
return ''.indexOf(c) & -1;
// flatten all possible options: global defaults, meta, option obj
function getSettings(el, options) {
options = options || {};
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 =
if (h) meta.height =
if (cls) meta.cls =
// crank html5 style data attributes
var dataName = 'data-';
for (var i=0; i & el.attributes. 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.
a = $.fn.media.
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';
// Flash Player
// generate flash using SWFObject library if possible
$.fn.media.swf = function(el, opts) {
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
$(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);
// map flv and mp3 files to the swf player by default
$.fn.media.flv = $.fn.media.mp3 = function(el, opts) {
var src = opts.
var player = /\.mp3\b/i.test(src) ? opts.mp3Player : opts.flvP
var key = opts.flvKeyN
src = encodeURIComponent(src);
opts.src =
opts.src = opts.src + '?'+key+'=' + (src);
var srcObj = {};
srcObj[key] =
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)
$.fn.media.xaml.warning = 1;
alert('You must include the Silverlight.js script.');
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,
parentElement: $div[0],
properties: props,
events: events
if (opts.caption) $('&div&').appendTo($div).html(opts.caption);
// generate object/embed markup
function generate(el, opts, player) {
var $el = $(el);
var o = $.fn.media.defaults.players[player];
var a, key,
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. 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
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'+'&');
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
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);
$div.html(a.join(''));
if (opts.caption)
$('&div&').appendTo($div).html(opts.caption);
})(jQuery);
浏览 54199
本地需要安装什么软件么应该不需要吧，这个是是官网： ，可以研究一下!
ie11怎么好像不支持！我好像没有试过ie浏览器...
浏览: 7857063 次
来自: 洛杉矶
[url][img]引用[/img][/url]:
要是包含C1Calendar，内容就更完善了
实现客户端扫码登录分为下列四步：1. Web页面生成二维码生成 ...
帮助到我了。。尤其是第一个参数 ，我就是这直接载入 ...
谢谢,辛苦啦编程开发子分类jsp怎样实现office pdf文档在线预览功能-中国学网-中国IT综合门户网站-提供健康,养生,留学,移民,创业,汽车等信息
> 信息中心 >
jsp怎样实现office pdf文档在线预览功能
来源：互联网 发表时间： 2:07:15 责任编辑：王亮字体：
为了帮助网友解决“jsp怎样实现office pdf文档在线预览功能”相关的问题，中国学网通过互联网对“jsp怎样实现office pdf文档在线预览功能”相关的解决方案进行了整理,用户详细问题包括:officepdfjsp如果是openoffice&+&swftools&+&flashpaper插件完成的就算了，这种方法我也知道。现在要完成的是类似百度文库那种效果的功能，请问具体要使用什么技术怎样实现呢？，具体解决方案如下：解决方案1：找找js库吧，看有没有合适的。解决方案2：引用&楼主&u&的回复:如果是openoffice&+&swftools&+&flashpaper插件完成的就算了，这种方法我也知道。现在要完成的是类似百度文库那种效果的功能，请问具体要使用什么技术怎样实现呢？什么样的JS库呢？解决方案3：http://www.jb51.net/article/44660.htm解决方案4：引用&2&楼&u&的回复:Quote: 引用&楼主&u&的回复:如果是openoffice&+&swftools&+&flashpaper插件完成的就算了，这种方法我也知道。现在要完成的是类似百度文库那种效果的功能，请问具体要使用什么技术怎样实现呢？什么样的JS库呢？这个不错显示pdf很有效，可能我表达有误还有office中word&execl等的处理呢。谢谢了！中国学网
解决方案5：[img=/forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/5.gif][/img个人觉得PageOffice插件不错哦，专门处理office文档的，可以看看
相关文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 中国学网 版权所有
京ICP备号-1 京公网安备02号Office在线预览及PDF在线预览实现方式大集合
Office在线预览及PDF在线预览的实现方式大集合
一、服务器先转换为PDF，再转换为SWF，最后通过网页加载Flash预览
微软方：利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件，然后再利用免费的swftools.exe工具生成swf格式的Flash文件，网页中加载flexpaper免费开源工具（有广告）实现Flash文件的预览。
1、有效的保护的源文件及文件的复制，不可复制也是缺点。
2、源码是自己的，版权有保证。
1、服务器上必须安装Office软件。
2、导出PDF文件本身是个打印过程，Excel页面格式未设置，会出现一张表格打印出多页来，阅读体验大大下降。
3、转换过程非常耗费资源，低配的CPU几乎能跑满，服务器卡死。转换时间也非常漫长，这个时间主要是卡在了转换PDF上面。
4、转换完成服务器会遗留大量Excel、Word进程无法正常退出，有一些折中的解决办法，可以在网上搜索。
5、设置非常麻烦，本身微软官方的说法Office软件是客户端程序，在与IIS交互的时候本身就未设计。所以很多程序员把精力浪费在了调试程序上面。有两点在调试的时候需要注意。一个是在web.config中设置
&identity impersonate="true" userName="administrator" password="你的服务器管理员密码& /&，一个是在Office软件的设置中设置跟桌面交互。
6、严重浪费磁盘空间，一个文件还需要一个PDF文件、一个SWF文件，是否每次都转换，纠结是要硬盘空间呢还是要CPU的资源。
参考链接：
非微软方：没有微软的Office软件可安装，只能用第三方的openoffice（开源、免费）来转换PDF文件，其它方面都一样，优缺点一样
无论是office还是openoffice，转换速度漫长与不支持高并发，注定其只能适合十几个人的小型办公OA系统使用
参考链接：
二、Office文档直接转换为SWF，通过网页加载Flash预览
利用flashpaper直接转换为SWF文件（虚拟打印机），然后利用flexpaper预览Flash文件。
flashpaper是Macromedia的一款产品，随着被Adobe公司收购，Macromedia对于这款软件早就放弃了，国内尚无人在程序中调试成功过。
参考链接：
三、office转Html、pdf转图片在线预览文件Html文件
利用DCOM配置直接操作Office文件，读取文件内容，导出Html文件
实践证明此方法不科学。
1、服务器上必须安装Office软件。
2、配置麻烦，正如微软所说，读取Office不是这么干的。
3、转换的文件格式均丢失。
4、仅限于IIS服务器，利用ASP.net（C#）。
参考链接：
四、第三方ActiveX浏览器控件
如科瀚的SOAOffice中间件、卓正软件的pageoffice控件、WebOffice控件、国外的Office Viewer ActiveX Control
可在线编辑等。
1、客户端需安装控件。
3、在Html5、CSS3以及桌面向浏览器转换的大潮流下，控件已是昨日黄花。
参考链接：
五、微软的Office365
微软新出的在线文档，与Google文档抗衡，估计没谷歌文档，微软也懒得出这个
微软自家的东西原生态呈现。
文件大小限制在10M以内，10M以外的无法预览
加载文件较多，各种图片、文字、样式、JQuery等，页面臃肿，加载速度慢，耗费流量，不适合手机预览
需要微软的批量许可（即授权），硬件投入方面：架设一台单独的服务器（可以是虚拟机），配置过低能安装，但无法运行，另外还需一台域服务器。而这两台机器上均不能安装其它程序，比如SQLServer，在Office365服务器上每次重启IIS会重置，也就是说你不能有任何其它网站。其主要是用来与SharePoint搭配使用。
参考链接：
六、第三方成熟的服务
如OfficeWeb365
1、OfficeWeb365采用适合中文排版的纯Html、CSS技术。
2、接口简单，适合PHP、JSP、ASP.net等所有的对接，省心省力。
3、费用低廉，节省投入。
4、不用关心客户端是否安装了Office软件，不用在客户端部署。
5、手机在线预览2页Word文档只有3K大小，且格式保留，领先全球的中文在线预览技术。
6、支持国产的金山WPS，这在国内尚属首列。
7、其解析速度（100ms）与高并发的支持远远把对手甩在了后面。
1、OfficeWeb365只能查看不能编辑，目前在线编辑版的正在开发。
参考链接：
七、在浏览器中直接打开
通过设置MiME类型，告诉浏览器这是Office文件，浏览器直接调用本地Office或PDF软件打开
1、不用编程，不用第三方服务，直截了当。
2、很多用户安装了Adobe的PDF预览软件，同时在浏览器上也直接安装了插件，浏览器可直接查看PDF文件。
你永远不知道客户机器上是否安装了Office软件，虽然几乎都安装了，但直接调用Office软件，客户体验大大下降，更何况还有个讨厌的迅雷一直在监视你的浏览器，不给你打开的机会，当然这些都是你无法预知的。
如金山快写、一些网盘的预览
参考链接：