Videos
Hello everybody,
I want to build a custom resume (CV) in HTML with CSS, but I want in the end to be able to also send it as a pdf file. Do you have any suggestions on how can I convert a HTML and CSS page to a PDF? I will respect the A4 page size when creating the HTML file.
Thanks in advance! Mihai
wkhtmltopdf
wkhtmltopdf is a gratis and open-source (LGPLv3, source) command line to convert HTML files to PDF. It has 5794 stars, 860 forks and 53 contributors on GitHub. It is written in C++. The first commit on GitHub was in May 7, 2008.
Installation
$ sudo apt-get install wkhtmltopdf
Usage
$ wkhtmltopdf input.html output.pdf
Example 1
- The page is not in landscape mode โ (see feature request), but it can be set with
-O landscape - The font is changed for Country โ
- Code is red โ
- Phone is red โ
- The table is striped โ
- JavaScript works โ
Disclosure: I work at Sejda and am involved with the development of this feature.
Sejda PDF
Sejda PDF is a commercial software package to process PDF files, including conversion of HTML to PDF.
Javascript, CSS3, custom fonts are all supported.
The HTML to PDF feature is currently in beta (feedback welcome!)
Installation
No installation is required.
Sejda's HTML to PDF feature is provided as an online service that works in the browser. https://www.sejda.com/html-to-pdf
The online service can be used for free for up to 3 conversions per hour.
A REST API for HTML to PDF conversion is also available.
Usage
- Open https://www.sejda.com/html-to-pdf
- Select a local HTML file or paste your HTML code
- Click on Convert HTML to PDF
Example 1
- The page is in landscape mode โ
- The font is changed for Country โ
- Code is red โ
- Phone is red โ
- The table is striped โ
- JavaScript works โ
@media print executes the code only for the print mode. So anything you include inside this is not affected in the normal browser mode. So you can get rid of the position: fixed; in the header only for print mode so it doesn't behave that way even in the print mode.
Fixed positioning takes an element out of the document flow, so no fiddling the element will work.
JSFiddle updated
If you want the position: fixed then all you can do is push the <main> content down only for print mode.
main{ margin-top: 5cm; } //probably more than what you had given '2cm'
Even this can't help you much because in the second page since you have made your header fixed(its out of the document flow), the overflowing contents will think the header doesn't exist and continue as usual giving you an overlapped effect.
you can use completely JavaScript to print the particular division in your page.here we are using simple swapping logic between original content and particular division.if you want entire page, pass entire page division id.
<script type="text/javascript">
function printContent() {
var printContents = document.getElementById("list${MACRO}TopDiv").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
list${MACRO}TopDiv - this is your division which you want to print