[亲妈版]HTML5在线预览PPT、Excel、Word、Pdf
站长
· 阅读数 19
前言：
本文基于html5技术，以及微软接口，实现html5在线预览PPT、Excel、Word、Pdf。
在线预览PPT
代码：
<iframe
src='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
<iframe
src='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>4、测试效果
![[亲妈版]HTML5在线预览PPT、Excel、Word、Pdf](https://img.blogweb.cn/article/1b4fd686aea44e128792d5ce0708c8dc.webp)