第一次在博客园冒泡,心情还是有点激动的,记录一点在工作或许会用到的东西,便于自己学习使用,毕竟好记忆赶不上烂笔头。
下面是一段简单的Web播放PDF文件的代码,只需引入pdfobject.min.js文件即可,js代码如下。<div id="my-pdf"></div>是PDF在web中显示的位置,样式可根据需求自行更改。关于PDF显示时的各种属性需在附加的js文件中进行修改。
<div id="my-pdf"></div> <script src="/js/pdfobject.min.js"></script> <script> PDFObject.embed("/pdf/sample-3pp.pdf", "#my-pdf");<!--pdf存储位置--> </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1394306-6', 'auto'); ga('send', 'pageview'); </script>
pdfobject.min.js 文件内容:
(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.PDFObject=factory()}})(this,function(){"use strict";if(typeof window==="undefined"||typeof navigator==="undefined"){return false}var pdfobjectversion="2.0.201604172",supportsPDFs,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;createAXO=function(type){var ax;try{ax=new ActiveXObject(type)}catch(e){ax=null}return ax};isIE=function(){return!!(window.ActiveXObject||"ActiveXObject"in window)};supportsPdfActiveX=function(){return!!(createAXO("AcroPDF.PDF")||createAXO("PDF.PdfCtrl"))};supportsPDFs=supportsPdfMimeType||isIE()&&supportsPdfActiveX();buildFragmentString=function(pdfParams){var string="",prop;if(pdfParams){for(prop in pdfParams){if(pdfParams.hasOwnProperty(prop)){string+=encodeURIComponent(prop)+"="+encodeURIComponent(pdfParams[prop])+"&"}}if(string){string="#"+string;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){var targetNode=document.body;if(typeof targetSelector==="string"){targetNode=document.querySelector(targetSelector)}else if(typeof jQuery!=="undefined"&&targetSelector instanceof jQuery&&targetSelector.length){targetNode=targetSelector.get(0)}else if(typeof targetSelector.nodeType!=="undefined"&&targetSelector.nodeType===1){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){if(typeof url!=="string"){return embedError("URL is not valid")}targetSelector=typeof targetSelector!=="undefined"?targetSelector:false;options=typeof options!=="undefined"?options:{};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(!targetNode){return embedError("Target element cannot be determined")}if(page){pdfOpenParams.page=page}pdfOpenFragment=buildFragmentString(pdfOpenParams);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}()}});