Can I suppress some parts of the page?

Let's assume that there is a sidebar in your HTML and you want to remove it from the conversion output.
 

Option #1
You can set pdfcrowd-remove or pdfcrowd-hide classes on the element:

<div id="sidebar" class="pdfcrowd-remove">Will be removed</div>
<div id="sidebar" class="pdfcrowd-hide">Will be hidden</div>

 

Option #2
An alternative is to utilize the fact that for each conversion we internally set the pdfcrowd-body class on the <body> element. This allows you to define CSS rules that are applied only when the document is converted by the Pdfcrowd service. So you can add the following to your style sheet:

.pdfcrowd-body #sidebar { 
    display: none; 
}

 

Option #3
Another option is to define a @media CSS rule for the print media type:

@media print {
    .no-print { display: none; }
}

Now you can use the no-print class in your HTML:

<div id="sidebar" class="no-print">Will be removed</div>

Pdfcrowd converts documents using the screen media type by default. You can change it to print media type with setUsePrintMedia(). For example in PHP it will look as follows:

$client->setUsePrintMedia(true);

If you are using the Save to PDF Link service, use the use_print_media URL parameter to enable print media queries.

 

Option #4
If you can't or don't want to edit HTML or CSS, an non-intrusive option is to use the setCustomJavascript() API method. The JavaScript code passed to this function will be executed just before the converter starts printing the output. Here is a JS code that removes #sidebar from the document:

libPdfcrowd.removeBySelector({selector: '#sidebar'});

The JS code calls a convenience function removeBySelector() from our libPdfcrowd library that is available during each conversion. Of course you can use an arbitrary code. If your page loads jQuery, you can use:

$("#sidebar").remove()

And you can use it in your API integration code like this:

$client->setCustomJavascript("$('#sidebar').remove()");

 

Bonus Tip:
Sometimes you may want to remove all elements that obscure your contents such as a cookie consent dialog, a pop up window, etc. The removeZIndexHigherThan() function from libPdfcrowd may come handy in such a case as it will remove all elements that have z-index greater than the specified value:

libPdfcrowd.removeZIndexHigherThan({zlimit: 100});

 


Category: API v2
FAQ home