jsPDF和html2canvas兼容IE11

之前写了利用jsPDF和html2canvas做多页PDF导出,但是发现在IE下面不行,存在BUG,也就是Promise未定义的问题,于是也一起处理了一下。
起先我想打算用bluebird.js,但是发现与现有项目代码存在冲突,所以先放弃了,然后采用了第二种方式通过引用polyfill.js可以解决这个问题:

polyfill.js:

(function(t){"use strict";if(!t.matches&&t.matchesSelector){t.matches=t.matchesSelector}if(!t.matches&&!t.matchesSelector){t.matches=function(t){var e=document.querySelectorAll(t),n=this;return Array.prototype.some.call(e,function(t){return t===n})}}})(Element.prototype);(function(t){"use strict";if(typeof t.Promise==="undefined"||t.Promise.toString().indexOf("[native code]")===-1){var e="[[PromiseStatus]]";var n="[[PromiseValue]]";var r="pending";var i="internal pending";var o="resolved";var s="rejected";var c=function(t,s){if(t[e]===i){t=t[n]}if(t[e]===r){t.deferreds.push(s)}else{t.handled=true;setTimeout(function(){var r=t[e]===o?s.onFulfilled:s.onRejected;if(r){try{a(s.promise,r(t[n]))}catch(t){u(s.promise,t)}}else{if(t[e]===o){a(s.promise,t[n])}else{u(s.promise,t[n])}}},0)}};var a=function(t,r){if(r===t){throw new TypeError("A promise cannot be resolved with it promise.")}try{if(r&&(typeof r==="object"||typeof r==="function")){if(r instanceof p){t[e]=i;t[n]=r;f(t);return}else if(typeof r.then==="function"){h(r.then.bind(r),t);return}}t[e]=o;t[n]=r;f(t)}catch(e){u(t,e)}};var u=function(t,r){t[e]=s;t[n]=r;f(t)};var f=function(t){if(t[e]===s&&t.deferreds.length===0){setTimeout(function(){if(!t.handled){console.error("Unhandled Promise Rejection: "+t[n])}},0)}t.deferreds.forEach(function(e){c(t,e)});t.deferreds=null};var h=function(t,e){var n=false;try{t(r,i)}catch(t){if(!n){n=true;u(e,t)}}function r(t){if(!n){n=true;a(e,t)}}function i(t){if(!n){n=true;u(e,t)}}};var l=function(t,e,n){this.onFulfilled=typeof t==="function"?t:null;this.onRejected=typeof e==="function"?e:null;this.promise=n};var p=function(t){this[e]=r;this[n]=null;this.handled=false;this.deferreds=[];h(t,this)};p.prototype["catch"]=function(t){return this.then(null,t)};p.prototype.then=function(t,e){var n=new p(function(){});c(this,new l(t,e,n));return n};p.all=function(t){var e=[].slice.call(t);return new p(function(t,n){if(e.length===0){t(e)}else{var r=e.length;var i=function(o,s){try{if(s&&(typeof s==="object"||typeof s==="function")){if(typeof s.then==="function"){s.then.call(s,function(t){i(o,t)},n);return}}e[o]=s;if(--r===0){t(e)}}catch(t){n(t)}};for(var o=0;o<e.length;o++){i(o,e[o])}}})};p.resolve=function(t){if(t&&typeof t==="object"&&t.constructor===p){return t}return new p(function(e){e(t)})};p.reject=function(t){return new p(function(e,n){n(t)})};p.race=function(t){return new p(function(e,n){for(var r=0,i=t.length;r<i;r++){t[r].then(e,n)}})};t.Promise=p}})(window);(function(){"use strict";if(!String.prototype.includes){String.prototype.includes=function(t,e){if(typeof e!=="number"){e=0}if(typeof t!=="string"||e+t.length>this.length){return false}else{return this.indexOf(t,e)!==-1}}}})();(function(){"use strict";if(typeof Array.prototype.find!=="function"){Array.prototype.find=function(t,e){if(this===null){throw new TypeError("Cannot read property 'find' of null")}if(typeof t!=="function"){throw new TypeError(typeof t+" is not a function")}var n=this.length;for(var r=0;r<n;r++){if(t.call(e,this[r],r,this)){return this[r]}}}}})();(function(){"use strict";if(typeof Array.prototype.includes!=="function"){Array.prototype.includes=function(t){var e=this.find(function(e){return e===t});return e===t}}})();(function(){"use strict";if(!Object.assign){Object.defineProperty(Object,"assign",{enumerable:false,configurable:true,writable:true,value:function(t,e){if(t===undefined||t===null){throw new TypeError("Cannot convert first argument to object")}var n=Object(t);for(var r=1;r<arguments.length;r++){var i=arguments[r];if(i===undefined||i===null){continue}var o=Object.keys(Object(i));for(var s=0,c=o.length;s<c;s++){var a=o[s];var u=Object.getOwnPropertyDescriptor(i,a);if(u!==undefined&&u.enumerable){n[a]=i[a]}}}return n}})}})();(function(t,e){"use strict";if("IntersectionObserver"in t&&"IntersectionObserverEntry"in t&&"intersectionRatio"in t.IntersectionObserverEntry.prototype){if(!("isIntersecting"in t.IntersectionObserverEntry.prototype)){Object.defineProperty(t.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}})}return}var n=[];function r(t){this.time=t.time;this.target=t.target;this.rootBounds=t.rootBounds;this.boundingClientRect=t.boundingClientRect;this.intersectionRect=t.intersectionRect||h();this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect;var n=e.width*e.height;var r=this.intersectionRect;var i=r.width*r.height;if(n){this.intersectionRatio=i/n}else{this.intersectionRatio=this.isIntersecting?1:0}}function i(t,e){var n=e||{};if(typeof t!="function"){throw new Error("callback must be a function")}if(n.root&&n.root.nodeType!=1){throw new Error("root must be an Element")}this._checkForIntersections=s(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT);this._callback=t;this._observationTargets=[];this._queuedEntries=[];this._rootMarginValues=this._parseRootMargin(n.rootMargin);this.thresholds=this._initThresholds(n.threshold);this.root=n.root||null;this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}i.prototype.THROTTLE_TIMEOUT=100;i.prototype.POLL_INTERVAL=null;i.prototype.USE_MUTATION_OBSERVER=true;i.prototype.observe=function(t){var e=this._observationTargets.some(function(e){return e.element==t});if(e){return}if(!(t&&t.nodeType==1)){throw new Error("target must be an Element")}this._registerInstance();this._observationTargets.push({element:t,entry:null});this._monitorIntersections();this._checkForIntersections()};i.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t});if(!this._observationTargets.length){this._unmonitorIntersections();this._unregisterInstance()}};i.prototype.disconnect=function(){this._observationTargets=[];this._unmonitorIntersections();this._unregisterInstance()};i.prototype.takeRecords=function(){var t=this._queuedEntries.slice();this._queuedEntries=[];return t};i.prototype._initThresholds=function(t){var e=t||[0];if(!Array.isArray(e))e=[e];return e.sort().filter(function(t,e,n){if(typeof t!="number"||isNaN(t)||t<0||t>1){throw new Error("threshold must be a number between 0 and 1 inclusively")}return t!==n[e-1]})};i.prototype._parseRootMargin=function(t){var e=t||"0px";var n=e.split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e){throw new Error("rootMargin must be specified in pixels or percent")}return{value:parseFloat(e[1]),unit:e[2]}});n[1]=n[1]||n[0];n[2]=n[2]||n[0];n[3]=n[3]||n[1];return n};i.prototype._monitorIntersections=function(){if(!this._monitoringIntersections){this._monitoringIntersections=true;if(this.POLL_INTERVAL){this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL)}else{c(t,"resize",this._checkForIntersections,true);c(e,"scroll",this._checkForIntersections,true);if(this.USE_MUTATION_OBSERVER&&"MutationObserver"in t){this._domObserver=new MutationObserver(this._checkForIntersections);this._domObserver.observe(e,{attributes:true,childList:true,characterData:true,subtree:true})}}}};i.prototype._unmonitorIntersections=function(){if(this._monitoringIntersections){this._monitoringIntersections=false;clearInterval(this._monitoringInterval);this._monitoringInterval=null;a(t,"resize",this._checkForIntersections,true);a(e,"scroll",this._checkForIntersections,true);if(this._domObserver){this._domObserver.disconnect();this._domObserver=null}}};i.prototype._checkForIntersections=function(){var t=this._rootIsInDom();var e=t?this._getRootRect():h();this._observationTargets.forEach(function(n){var i=n.element;var s=f(i);var c=this._rootContainsTarget(i);var a=n.entry;var u=t&&c&&this._computeTargetAndRootIntersection(i,e);var h=n.entry=new r({time:o(),target:i,boundingClientRect:s,rootBounds:e,intersectionRect:u});if(!a){this._queuedEntries.push(h)}else if(t&&c){if(this._hasCrossedThreshold(a,h)){this._queuedEntries.push(h)}}else{if(a&&a.isIntersecting){this._queuedEntries.push(h)}}},this);if(this._queuedEntries.length){this._callback(this.takeRecords(),this)}};i.prototype._computeTargetAndRootIntersection=function(n,r){if(t.getComputedStyle(n).display=="none")return;var i=f(n);var o=i;var s=p(n);var c=false;while(!c){var a=null;var h=s.nodeType==1?t.getComputedStyle(s):{};if(h.display=="none")return;if(s==this.root||s==e){c=true;a=r}else{if(s!=e.body&&s!=e.documentElement&&h.overflow!="visible"){a=f(s)}}if(a){o=u(a,o);if(!o)break}s=p(s)}return o};i.prototype._getRootRect=function(){var t;if(this.root){t=f(this.root)}else{var n=e.documentElement;var r=e.body;t={top:0,left:0,right:n.clientWidth||r.clientWidth,width:n.clientWidth||r.clientWidth,bottom:n.clientHeight||r.clientHeight,height:n.clientHeight||r.clientHeight}}return this._expandRectByRootMargin(t)};i.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,n){return e.unit=="px"?e.value:e.value*(n%2?t.width:t.height)/100});var n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};n.width=n.right-n.left;n.height=n.bottom-n.top;return n};i.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1;var r=e.isIntersecting?e.intersectionRatio||0:-1;if(n===r)return;for(var i=0;i<this.thresholds.length;i++){var o=this.thresholds[i];if(o==n||o==r||o<n!==o<r){return true}}};i.prototype._rootIsInDom=function(){return!this.root||l(e,this.root)};i.prototype._rootContainsTarget=function(t){return l(this.root||e,t)};i.prototype._registerInstance=function(){if(n.indexOf(this)<0){n.push(this)}};i.prototype._unregisterInstance=function(){var t=n.indexOf(this);if(t!=-1)n.splice(t,1)};function o(){return t.performance&&performance.now&&performance.now()}function s(t,e){var n=null;return function(){if(!n){n=setTimeout(function(){t();n=null},e)}}}function c(t,e,n,r){if(typeof t.addEventListener=="function"){t.addEventListener(e,n,r||false)}else if(typeof t.attachEvent=="function"){t.attachEvent("on"+e,n)}}function a(t,e,n,r){if(typeof t.removeEventListener=="function"){t.removeEventListener(e,n,r||false)}else if(typeof t.detatchEvent=="function"){t.detatchEvent("on"+e,n)}}function u(t,e){var n=Math.max(t.top,e.top);var r=Math.min(t.bottom,e.bottom);var i=Math.max(t.left,e.left);var o=Math.min(t.right,e.right);var s=o-i;var c=r-n;return s>=0&&c>=0&&{top:n,bottom:r,left:i,right:o,width:s,height:c}}function f(t){var e;try{e=t.getBoundingClientRect()}catch(t){}if(!e)return h();if(!(e.width&&e.height)){e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}}return e}function h(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function l(t,e){var n=e;while(n){if(n==t)return true;n=p(n)}return false}function p(t){var e=t.parentNode;if(e&&e.nodeType==11&&e.host){return e.host}return e}t.IntersectionObserver=i;t.IntersectionObserverEntry=r})(window,document);(function(){if(!Element.prototype.closest){Element.prototype.closest=function(t){var e=this;while(e){if(e.matches(t)){return e}e=e.parentElement}return null}}})();(function(){if(typeof window.CustomEvent==="function")return false;function t(t,e){e=e||{bubbles:false,cancelable:false,detail:undefined};var n=document.createEvent("CustomEvent");n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail);return n}t.prototype=window.Event.prototype;window.CustomEvent=t})();(function(t){"use strict";if(!t.loadCSS){t.loadCSS=function(){}}var e=loadCSS.relpreload={};e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(t){e=false}return function(){return e}}();e.bindMediaToggle=function(t){var e=t.media||"all";function n(){t.media=e}if(t.addEventListener){t.addEventListener("load",n)}else if(t.attachEvent){t.attachEvent("onload",n)}setTimeout(function(){t.rel="stylesheet";t.media="only x"});setTimeout(n,3e3)};e.poly=function(){if(e.support()){return}var n=t.document.getElementsByTagName("link");for(var r=0;r<n.length;r++){var i=n[r];if(i.rel==="preload"&&i.getAttribute("as")==="style"&&!i.getAttribute("data-loadcss")){i.setAttribute("data-loadcss",true);e.bindMediaToggle(i)}}};if(!e.support()){e.poly();var n=t.setInterval(e.poly,500);if(t.addEventListener){t.addEventListener("load",function(){e.poly();t.clearInterval(n)})}else if(t.attachEvent){t.attachEvent("onload",function(){e.poly();t.clearInterval(n)})}}t.loadCSS=loadCSS})(window);

bluebird.js:
bluebird.js代码量比较大,我就不贴出来了,需要的小伙伴可以去搜索一下,应该马上就能找到的,IE的坑虽然有点小多,但是慢慢填也就填完了,加油

你可能感兴趣的:(前端知识)