前端js预览并且导出pdf文件

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

<!DOCTYPE html>
<html>
<head><title>Show PDF</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/zhfg_common.css"/><link href="css/mui.min.css" rel="stylesheet" /><link rel="stylesheet" type="text/css" href="css/fg-common.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/mui.min.js"></script><script src="js/util.js"></script><script src="js/jquery.media.js"></script><script src="js/serverPath.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><header class="mui-bar mui-bar-nav ystzdrk-bj_header"><a style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 style="top:1px;color: #fff;" class="mui-title">pdf信息</h1><img id="loc_img" class="mui-pull-right" src="data:images/ywbl_download.png" onclick="download()"/></header><a class="media" href=""></a>
</body>
<script type="text/javascript">$(function () {var req = GetRequest();var url = decodeURI(req["url"]);$('a.media').attr("href",url);$('a.media').media({width:375, height:667}); });//下载界面跳转function download(){var req = GetRequest();var url = decodeURI(req["url"]);window.open(url);}</script>
</html>

其中url为pdf的服务器上的地址。

这个是那个插件的官网： http://malsup.com/jquery/media/，可以研究一下。

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);

前端js预览并且导出pdf文件相关推荐

php+预览和下载pdf文件,vue实现在线预览pdf文件和下载（pdf.js）
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件, ...
前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
html 打印预览兼容,vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
h5页面如何预览excel文件_移动端页面，如何解析预览 word/excel/PDF文件？
展开全部利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免费的swftools.exe工具生成swf格式的Flash文件,网页中加 ...
pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式
ViewerJS简介 ViewerJS的繁重工作是由这些令人敬畏的项目完成的: PDF.js(由Mozilla提供) WebODF(由KO GmbH提供) 运行ViewerJS就像创建链接一样简单.您 ...
pdf.js——在线预览下载打印pdf文件插件
html页面使用下载PDF.js, http://mozilla.github.io/pdf.js/getting_started/#download 将 pdfjs 文件夹放到项目static ...
【微信小程序】小程序实现文件的上传及预览，以PDF文件为例。
安卓系统和ios系统一开始被一篇ios预览PDF文件需要用到webview的博客给误导了,以为安卓预览文件需要调用wx.downloadFile()和wx.openDocument()这两个API, ...
实现pdf文件在线预览（需要PDF文件的路径）
工作中需要完成一个PDF在线预览的功能,最简单的方法还是使用pdf的插件. 1.首先下载插件链接:https://pan.baidu.com/s/1q4zuHrmjJL9QSEn2Iy5O9Q 提取 ...

前端js预览并且导出pdf文件

前端js预览并且导出pdf文件相关推荐

最新文章

热门文章