Skip to main content

PDF Button - JS Converter

Updated over 2 weeks ago

JS Converter in the PDF Button widget allows you to use the JS Library for PDF Generation.

Using the JS Converter

JS converter is especially useful for those working with short content, ideally fitting on a single page.

You must take the length of the document into account when deciding which converter to use. The JS converter is incredibly accurate, but should only be utilized for documents that can fit comfortably on a single page. On the contrary, if you have larger documents spanning multiple pages, it is best to use one of the other converters.

The JS converter uses the html2canvas library, which is often unreliable. We provide it hoping that it will be useful, but unfortunately, we cannot fix the problems of the underlying library. If you need more reliability, use the HTML converter with handwritten HTML code.

Triggering Actions Before and After PDF Rendering

When using the JS Converter, you can hook into the rendering process to run custom actions:

  • Before rendering starts, the following event is triggered:

    jQuery(window).on("dce/jsconvpdf/before", function () { 
    // Your custom logic here
    });
  • After rendering is complete, this event is triggered:

    jQuery(window).on("dce/jsconvpdf/after", function () { 
    // Your custom logic here
    });

These hooks are helpful if you want to delay rendering until specific content is loaded or visually prepare the page before generating the PDF.

Styling with dce-pdf-printing Class

During the export process, the class dce-pdf-printing is added to the <body> tag. You can use it to:

  • Hide unnecessary elements

  • Apply different styles just for the PDF version

Example:

.dce-pdf-printing .site-header, body.dce-pdf-printing .footer { 
display: none;
}

This ensures that only the relevant content appears in the generated PDF.

Did this answer your question?