Receive an Error from promise.js - Clone the HTML Object in IE11 using Javascript and html2canvas

Question

UPDATED - sorry

I'm working on a DC.js dashboard and I'm trying to provide a screenshot feature. Currently I develop a button that will called a DIV id that contains all the charts in it and convert the SVGs into Canvas so I can screenshot using the HTML2Canvas. Though during the process, I have to provide an inline style for the charts in order to make this works so I have to create a clone object that it wont make changes on the existing page. When I click on the button, I received this error on the console page in Developer Tool. The error is..

"Possible Unhandled Promise Rejection: TypeError: Unable to get property 'removeAttribute' of undefined or null reference."

I have to work on IE11 so this is kind of challenging due to limitations. I did implement the promise.js because IE11 doesn't support promise feature.

Example:

<div id="masterContainer"> 
    ... 'all the html, svg, etc. elements  to create the charts'
</div>

In Javascript, I have a button that called the masterContainer and do its process.

function screenshot() {
  var getContainer = $('#masterContainer');  
  var cloneObject = getContainer.clone();  -- I want to clone this div object along with the elements inside it.

  elementsToCanvas(cloneObject);  -- This is a function where it takes that html object and convert all the svgs, ect. to canvas. Also takes the cloneObject and apply it to html2canvas;
}

I just want to create a clone object for that masterContainer without making changes on the existing page... THOUGH it works without cloning the object but that made changes on the existing page. Please help.

">I tried using the .clone() but within that object, it does not have the .find function as part of it .." What does that supposed to mean? — ibrahim tanyalcin, May 07 '18 at 17:07
Very sorry, Please view my updated question. I think the clone object works but I'm receiving an exception while processing the html2canvas — timJIN520, May 07 '18 at 17:55
it seems to me, that you'll need to include a promise polyfill — ibrahim tanyalcin, May 07 '18 at 18:04

ibrahim tanyalcin · Answer 1 · 2018-05-07T18:03:49.420

0

It is not clear what you are asking here but element.cloneNode is supported in ie 11. However to clone all its children, you will need to provide an optional parameter, true, just make sure that you do not accidentally add it to the DOM and end up with duplicate ids.

function screenshot() {
  var clone = document.getElementById("masterContainer").cloneNode(true);

  elementsToCanvas(clone);
}

Update: Based on the exception that you paste, it seems to me that is has nothing to do with the clone but the fact that Promises are NOT supported at ie11. Consider using a conditional polyfill.

edited May 07 '18 at 18:03

answered May 07 '18 at 17:14

ibrahim tanyalcin

5,643
3
16
22

Thanks for the response. I did apply promise.js and polyfill.js too. Also, just now, I just click on that polyfill link you provided and updated both js files but i receiving a syntax error on the top of the script where it says import. Any idea? – timJIN520 May 07 '18 at 18:37
That is for server side, on browser side you need to use this script: https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js – ibrahim tanyalcin May 07 '18 at 19:04
I have apply the es6-promise.auto.min.js file. When I click on the button, I didnt see the error but nothing happens when i used a clone object. though it did work when i used the existing object. – timJIN520 May 07 '18 at 19:24
clone the entire html: `document.documentElement.cloneNode(true)` and try to use this clone to see if it works. And please consider making a fiddle. Because it is quite difficult for me to pin point what is exactly going on based on only your description. – ibrahim tanyalcin May 07 '18 at 19:36

Receive an Error from promise.js - Clone the HTML Object in IE11 using Javascript and html2canvas

1 Answers1