前言:
本文基于html5技术,以及微软接口,实现html5在线预览PPT、Excel、Word、Pdf。
在线预览PPT
代码:
<iframesrc='https://view.officeapps.live.com/op/embed.aspx?src=pptx线上地址'width='1000px' height='800px' frameborder='1'></iframe>
留神:此办法,不止后缀为.ppt格局的文件,只反对.pptx文件,如果ppt文件不多,能够关上Wps或者Office将其手动转换,如果过于多,能够应用上面办法,基于Python批量将PPT转换为pptx:请点击 ppt批量转换pptx
在线预览Excel
<iframesrc='https://view.officeapps.live.com/op/embed.aspx?src=xlsx线上地址'width='1000px' height='800px' frameborder='1'></iframe>
在线预览Word
<iframe src="https://view.officeapps.live.com/op/view.aspx?src=docx线上地址" width='1000px' height='800px' frameborder='1'></iframe>
在线预览Pdf
步骤:
1、首先援用pdfOnLine.js
/** * Created by super on 2016/12/8. *//*global ActiveXObject, window, console, define, module, jQuery *///jshint unused:false, strict: false/* PDFObject v2.0.201604172 https://github.com/pipwerks/PDFObject Copyright (c) 2008-2016 Philip Hutchison MIT-style license: http://pipwerks.mit-license.org/ UMD module pattern from https://github.com/umdjs/umd/blob/master/templates/returnExports.js */(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define([], factory); } else if (typeof module === 'object' && module.exports) { // Node. Does not work with strict CommonJS, but // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(); } else { // Browser globals (root is window) root.PDFObject = factory(); }}(this, function () { "use strict"; //jshint unused:true //PDFObject is designed for client-side (browsers), not server-side (node) //Will choke on undefined navigator and window vars when run on server //Return boolean false and exit function when running server-side if(typeof window === "undefined" || typeof navigator === "undefined"){ return false; } var pdfobjectversion = "2.0.201604172", supportsPDFs, //declare functions createAXO, isIE, supportsPdfMimeType = (typeof navigator.mimeTypes['application/pdf'] !== "undefined"), supportsPdfActiveX, buildFragmentString, log, embedError, embed, getTargetElement, generatePDFJSiframe, isIOS = (function (){ return (/iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())); })(), generateEmbedElement; /* ---------------------------------------------------- Supporting functions ---------------------------------------------------- */ createAXO = function (type){ var ax; try { ax = new ActiveXObject(type); } catch (e) { ax = null; //ensure ax remains null } return ax; }; //IE11 still uses ActiveX for Adobe Reader, but IE 11 doesn't expose //window.ActiveXObject the same way previous versions of IE did //window.ActiveXObject will evaluate to false in IE 11, but "ActiveXObject" in window evaluates to true //so check the first one for older IE, and the second for IE11 //FWIW, MS Edge (replacing IE11) does not support ActiveX at all, both will evaluate false //Constructed as a method (not a prop) to avoid unneccesarry overhead -- will only be evaluated if needed isIE = function (){ return !!(window.ActiveXObject || "ActiveXObject" in window); }; //If either ActiveX support for "AcroPDF.PDF" or "PDF.PdfCtrl" are found, return true //Constructed as a method (not a prop) to avoid unneccesarry overhead -- will only be evaluated if needed supportsPdfActiveX = function (){ return !!(createAXO("AcroPDF.PDF") || createAXO("PDF.PdfCtrl")); }; //Determines whether PDF support is available supportsPDFs = (supportsPdfMimeType || (isIE() && supportsPdfActiveX())); //Create a fragment identifier for using PDF Open parameters when embedding PDF buildFragmentString = function(pdfParams){ var string = "", prop; if(pdfParams){ for (prop in pdfParams) { if (pdfParams.hasOwnProperty(prop)) { string += encodeURIComponent(prop) + "=" + encodeURIComponent(pdfParams[prop]) + "&"; } } //The string will be empty if no PDF Params found if(string){ string = "#" + string; //Remove last ampersand string = string.slice(0, string.length - 1); } } return string; }; log = function (msg){ if(typeof console !== "undefined" && console.log){ console.log("[PDFObject] " + msg); } }; embedError = function (msg){ log(msg); return false; }; getTargetElement = function (targetSelector){ //Default to body for full-browser PDF var targetNode = document.body; //If a targetSelector is specified, check to see whether //it's passing a selector, jQuery object, or an HTML element if(typeof targetSelector === "string"){ //Is CSS selector targetNode = document.querySelector(targetSelector); } else if (typeof jQuery !== "undefined" && targetSelector instanceof jQuery && targetSelector.length) { //Is jQuery element. Extract HTML node targetNode = targetSelector.get(0); } else if (typeof targetSelector.nodeType !== "undefined" && targetSelector.nodeType === 1){ //Is HTML element targetNode = targetSelector; } return targetNode; }; generatePDFJSiframe = function (targetNode, url, pdfOpenFragment, PDFJS_URL, id){ var fullURL = PDFJS_URL + "?file=" + encodeURIComponent(url) + pdfOpenFragment; var scrollfix = (isIOS) ? "-webkit-overflow-scrolling: touch; overflow-y: scroll; " : "overflow: hidden; "; var iframe = "<div style='" + scrollfix + "position: absolute; top: 0; right: 0; bottom: 0; left: 0;'><iframe " + id + " src='" + fullURL + "' style='border: none; width: 100%; height: 100%;' frameborder='0'></iframe></div>"; targetNode.className += " pdfobject-container"; targetNode.style.position = "relative"; targetNode.style.overflow = "auto"; targetNode.innerHTML = iframe; return targetNode.getElementsByTagName("iframe")[0]; }; generateEmbedElement = function (targetNode, targetSelector, url, pdfOpenFragment, width, height, id){ var style = ""; if(targetSelector && targetSelector !== document.body){ style = "width: " + width + "; height: " + height + ";"; } else { style = "position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;"; } targetNode.className += " pdfobject-container"; targetNode.innerHTML = "<embed " + id + " class='pdfobject' src='" + url + pdfOpenFragment + "' type='application/pdf' style='overflow: auto; " + style + "'/>"; return targetNode.getElementsByTagName("embed")[0]; }; embed = function(url, targetSelector, options){ //Ensure URL is available. If not, exit now. if(typeof url !== "string"){ return embedError("URL is not valid"); } //If targetSelector is not defined, convert to boolean targetSelector = (typeof targetSelector !== "undefined") ? targetSelector : false; //Ensure options object is not undefined -- enables easier error checking below options = (typeof options !== "undefined") ? options : {}; //Get passed options, or set reasonable defaults var id = (options.id && typeof options.id === "string") ? "id='" + options.id + "'" : "", page = (options.page) ? options.page : false, pdfOpenParams = (options.pdfOpenParams) ? options.pdfOpenParams : {}, fallbackLink = (typeof options.fallbackLink !== "undefined") ? options.fallbackLink : true, width = (options.width) ? options.width : "100%", height = (options.height) ? options.height : "100%", forcePDFJS = (typeof options.forcePDFJS === "boolean") ? options.forcePDFJS : false, PDFJS_URL = (options.PDFJS_URL) ? options.PDFJS_URL : false, targetNode = getTargetElement(targetSelector), fallbackHTML = "", pdfOpenFragment = "", fallbackHTML_default = "<p>This browser does not support inline PDFs. Please download the PDF to view it: <a href='[url]'>Download PDF</a></p>"; //If target element is specified but is not valid, exit without doing anything if(!targetNode){ return embedError("Target element cannot be determined"); } //page option overrides pdfOpenParams, if found if(page){ pdfOpenParams.page = page; } //Stringify optional Adobe params for opening document (as fragment identifier) pdfOpenFragment = buildFragmentString(pdfOpenParams); //Do the dance if(forcePDFJS && PDFJS_URL){ return generatePDFJSiframe(targetNode, url, pdfOpenFragment, PDFJS_URL, id); } else if(supportsPDFs){ return generateEmbedElement(targetNode, targetSelector, url, pdfOpenFragment, width, height, id); } else { if(PDFJS_URL){ return generatePDFJSiframe(targetNode, url, pdfOpenFragment, PDFJS_URL, id); } else if(fallbackLink){ fallbackHTML = (typeof fallbackLink === "string") ? fallbackLink : fallbackHTML_default; targetNode.innerHTML = fallbackHTML.replace(/\[url\]/g, url); } return embedError("This browser does not support embedded PDFs"); } }; return { embed: function (a,b,c){ return embed(a,b,c); }, pdfobjectversion: (function () { return pdfobjectversion; })(), supportsPDFs: (function (){ return supportsPDFs; })() };}));
2、body写寄存pdf地位
<body> <p id="example1"></p></body>
3、script加载pdf
<script> var options = { height: "550px", pdfOpenParams: {view: 'FitV', page: '0' }, name:"mans", fallbackLink: "<p>您的浏览器暂不反对此pdf,请下载最新的浏览器</p>" }; PDFObject.embed("pdf/test.pdf", "#example1",options);</script>