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>
Or conversely, you can mark the elements you want to convert with the pdfcrowd-convert-only-this class:
<div id="main-content"
class="pdfcrowd-convert-only-this">Only this element will be converted.</div>
Option #2
If you can't or don't want to edit HTML or CSS, an non-intrusive option is to use the setCustomCss option. You can define custom CSS rules to hide some elements, e.g.:
.sidebar, .cookies-box {
display: none !important;
}
Option #3
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 #4
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 #5
If you can't or don't want to edit HTML or CSS, an non-intrusive option is to use the setCustomJavascript option. 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});