Html2canvas: onclone callback removed?

Created on 7 Feb 2018 · 8Comments · Source: niklasvh/html2canvas

Has the onclone callback removed? If yes, what's the recommended way of manipulating the cloned document?

JSFiddle: http://jsfiddle.net/w8woox8c/3/

Specifications:

html2canvas version tested with: 1.0.0-alpha.9
Browser & version: Chrome 63
Operating system: Windows 8, Ubuntu 17.10

Source

sagrawal-idrc

👍3 ❤1

Most helpful comment

But If I modify the element inside the onclone, it never reflects in the generated PDF. I am not using html2canvas directly, I am using it through html2pdf which uses jsPDF and html2canvas inside. I am not sure how to make it work.

agiratech-vigneshm on 24 Apr 2018

👍13

All 8 comments

Any news on that topic?

markokoleznik on 12 Feb 2018

@niklasvh This looks promising, thank you very much! I'll give it a shot and I'll get back at you.

markokoleznik on 16 Feb 2018

Updated to 1.0.0-alpha.10 but still not working for me. Am I doing something wrong, here?

    html2canvas(this.exportSlide, {
      canvas:  this.exportCanvas,
      logging: false,
      width: 1080,
      height: 1080,
      scale:   1,
      onclone: function(doc) {
        console.log('onclone fired');
      }
    }).then(() => {
      this.exportAnchor.href = this.exportCanvas.toDataURL();
      this.exportAnchor.download = "SlideExport";
      this.exportAnchor.click();
    });

Trying to use the solution in #1448

JasonTheAdams on 15 Mar 2018

Also no worky for me. Onclone doesn't seem to do anything.

moettinger on 20 Mar 2018

@JasonTheAdams , @moettinger I've looked into my code and it works just fine with version 1.0.0-alpha.10.
Can you try wrapping this into setTimeout with, let's say 1 second delay?
If that doesn't work, I'll provide you with my working code...

markokoleznik on 20 Mar 2018

Hi @markokoleznik! Sorry, which part, exactly, are we wrapping in a timeout? The entire html2canvas call or just the onclone function?

JasonTheAdams on 20 Mar 2018

👀2

agiratech-vigneshm on 24 Apr 2018

👍13

@agiratech-vigneshm and others who might find this useful.

I have been digging around to find a solution to this and was disappointed that I could find none. Here is my solution after going through html2pdf code. Unfortunately they don't document the lib very concisely and this is why we are glob-trotting looking for answers like this.

import $ from 'jquery';
html2pdf()
        .set({
          margin:      [10, 10],
          filename:    `blah.pdf`,
          // don't use html2canvas onclone here
        })
        .from('source')
        .toContainer()
        .then(()=>{
          const doc = $('.html2pdf__container');
          doc.find('.remove-on-export').remove();
          doc.find('.hide-on-export').hide();
          doc.find('.show-on-export').show();
        })
        .save();

This enables me to manipulate the document however I like as you would in onclone.