Is there a way to print the pdf, with the real contents on html hidden?

lesterjanpearson commented 6 years ago

PTKC commented 6 years ago

@lesterjanpearson Do you mean to hide some parts of the PDF?

<body>
    <section id="pdf">
        <div>Hello World</div>
        <div data-html2canvas-ignore>I will not be shown</div>
    </section>
</body>

eKoopmans commented 6 years ago

Hi @lesterjanpearson, it seems to me you either meant:

Preventing certain parts of your HTML from appearing in the PDF, in which case @PhilipTKC's answer should work well, or
Printing a PDF without having the HTML displayed anywhere on-screen. For this there are a few options, possibly the easiest would be to pass the HTML code as a string into html2pdf (when using .from(), you can either pass an element or an HTML string). That will create it entirely invisibly.

Let us know if that helps!

lesterjanpearson commented 6 years ago

what I am currently doing now is, hidding the content. then when user clicks download pdf button, show it until the callback and dowloads, then hide i back.

mmoraes commented 3 years ago

@eKoopmans I know this is a very old thread but since it's still open and I've just needed this functionality recently, I'm sharing a piece of code that works with the latest version of html2pdf, in case someone needs it:

HTML

<div class="your-target-div-here" style="display: none;">
    This is the target DIV, to be "printed" inside the generated PDF file.
</div>

JS

const opt = {
      margin: 0,
      filename: "any-name-here",
      image: { type: "jpeg", quality: 1 },
      html2canvas: {
        scale: 5,
        logging: true,
        letterRendering: true,
        useCORS: true,
        onclone: function (doc) {
          doc.querySelector(".your-target-div-here").style.display = "block";
        },
      },
      jsPDF: {
        unit: "in",
        format: "A4",
        orientation: "landscape",
      },
    };

html2pdf()
  .set(opt)
  .from(element)
  .toPdf()
  .save();

najlaahmadyar commented 3 years ago

@mmoraes I did the same thing but I don't know why it is not working, would you please check it once.

HTML

 <div  class="qrCodeDiv" style="display: none!important;">
           //html elements                     
</div>

TS

 const element = document.getElementById('report-section');
  const options = {
      filename:     'report.pdf',
      image:        { type: 'jpeg', quality: 1 },
      html2canvas:  { 
          scale: 2,
          logging: true,
          letterRendering: true,
          useCORS: true,
          onclone: function (doc) {
              doc.querySelector(".qrCodeDiv").style.display = "block";
          },

      },
      jsPDF:        { unit: 'mm', format: 'letter', orientation: 'portrait' },
      pagebreak: { after: ['#cover', '.section', '.page-break'] }
  }

  var worker = html2pdf().set(options)
  .from(element)
  .toPdf()
  .save();

mmoraes commented 3 years ago

@najlaahmadyar Try without !important or this other approach with the <div> tags:

<div style="display: none" class="qrCodeDiv">
    <div style="top: -9999999px; position: absolute">Content to appear in the PDF file</div>
</div>

najlaahmadyar commented 3 years ago

@mmoraes I think in my case onclone is not running. for testing, I changed the color of an element in that function but it didn't affect at all.

Is there any documentation on how to use these options?

mmoraes commented 3 years ago

@najlaahmadyar Which version are you running? Earlier versions don't have this feature, I think.

najlaahmadyar commented 3 years ago

@mmoraes html2pdf.js version 0.9.2, which version I should use. seems the older versions don't support the page breaks.

mmoraes commented 3 years ago

@najlaahmadyar I'm not sure which version started being compatible with onclone but I certainly advise you to use the latest version, as it fixes several bugs and adds new features.

SagarDesai111 commented 3 years ago

@najlaahmadyar onclone func is working but doc.querySelector is not working. Is there any other solution for this? I'm using the latest version 0.9.3

TomDeSmet commented 2 years ago

The querySelector works, but it seems the output of the onclone function is not used.

Dpessheva commented 2 years ago

@TomDeSmet Did you solve this already? I am having the same problem

TomDeSmet commented 2 years ago

It's been a while but I believe I used innerHTML to get the hidden contents I want to print as a HTML string and pass that to the from() function.

ThibautCerba commented 1 year ago

Just faced this issue, solved it with this :

HTML - The hidden div that will be used in my pdf

<div id="element-to-convert" class="element-to-convert" style="display: none;">
    <!-- Your pdf content -->
</div>

JS - The logic for downloading the pdf

// Choose the element that your pdf will render .
const element = document.getElementById("element-to-convert");

// Clone the element
var clonedElement = element.cloneNode(true);

// Change the display rule of the cloned element 
clonedElement.style.display = "block"

// Generate pdf
html2pdf(clonedElement, options);

// Remove the cloned element
clonedElement.remove();

kovaletsyurii-hue commented 11 months ago

@ThibautCerba Your solution works perfectly! Thanks a lot!

mahalinge commented 4 months ago

@ThibautCerba solution works fine ,thanks a lot!

ElDez28 commented 4 months ago

The solution works, but I'm using EChart in my app and it is not converted to pdf. I'm getting the empty canvas

eKoopmans / html2pdf.js

Is there a way to print the pdf, with the real contents on html hidden? #146

HTML

JS