Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onclone callback removed? #1434

Closed
sagrawal-idrc opened this issue Feb 7, 2018 · 9 comments
Closed

onclone callback removed? #1434

sagrawal-idrc opened this issue Feb 7, 2018 · 9 comments

Comments

@sagrawal-idrc
Copy link

sagrawal-idrc commented Feb 7, 2018

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
@sagrawal-idrc sagrawal-idrc changed the title onclone callback? onclone callback removed? Feb 7, 2018
@markokoleznik
Copy link

Any news on that topic?

@markokoleznik
Copy link

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

@JasonTheAdams
Copy link

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

@moettinger
Copy link

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

@markokoleznik
Copy link

@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...

@JasonTheAdams
Copy link

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

@agiratech-vigneshm
Copy link

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.

@emahuni
Copy link

emahuni commented Jul 18, 2020

@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.

@sainthardrock
Copy link

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.

Thank you for answer it helped me a lot. And you are right about docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants