Save a Pre Element as PDF with CSS

Save a pre element as PDF with CSS

Try opening new window , appending pre html , style , if any for pre element, to new window document.body , calling .focus() , .print() on new window ; select system print dialog, select "Print to file"

$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // `styles`: `style` element; 
  // or `String` "<style>.light{color:#0af;}</style>" ;
  // alternatively , add `style` attribute to `pre` element directly,
  // e.g., `<pre style="color:#0af;">`
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  // append `text`:`pre` element `styles`:`style` element
  // at `popup` `document.body`
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});

jsfiddle http://jsfiddle.net/tn04Ldka/2/

Print/save page as PDF, but if an element would get cut off then add a page break before it

Have you tried using regular CSS and setting the

div {page-break-inside: avoid}

property for your divs to see if it avoids creating a page break inside them?

https://www.w3schools.com/cssref/pr_print_pagebi.asp

Export CSS-styled HTML to PDF

Everything is working as expected.

For redability, html to pdf ignores background images and defaults the text color to system color (which is usually black). Why? Because in most cases it does more good than harm. Web graphics can use a wide array of graphic techniques and not all are compatible with print (in the sense it might come out looking bad, being hard to read and it might also be heavier on ink cartridges). Most people printing a web page are interested in the text and its readability, not in the fancy graphics.

So, when trying to Print (Ctrl + P) your CV directly from the SO snippet you placed in your question, by default, Chrome ignored background graphics. After I opened advanced settings and checked "Background graphics" it looked as you want it to:

Sample Image

I have no idea how to enable background graphics in whatever library you're trying to use, but I can assure you most (if not all) have a setting for it that's turned off by default.

All you need to do is find the setting in your library's docs and turn it on.

Download a div in a HTML page as pdf using javascript

You can do it using jsPDF

HTML:

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript:

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

Generating pdf from external html file and css

As the documentation says the addHtml method is deprecated ( http://raw.githack.com/MrRio/jsPDF/master/docs/global.html#addHTML), so i played a bit with your example and if you updated your code like this it works. You still have to work a bit to fix the width of div in the pdf.

<!DOCTYPE html>
        <html>
            <head>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
                <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
            </head>
            <body>
                <div id="capture" style="padding: 10px; background: #f5da55;">
                        <h4 style="color: #000; ">Hello world!</h4>
                </div>
            </body>
            <script type="text/javascript">
                function savePDF(data) {
                    let pdf = new jsPDF('p','pt','a4');
                    pdf.html(data, {
                       callback: function (doc) {
                         doc.save("test.pdf");
                       }
                    });
                } 
                savePDF(document.body.innerHTML)
            </script>
        </html>

save/download html div as image/pdf

The simplest method for HTML to PDF is to use the browser output e.g. Chrome

Sample Image

And this can be run as a headless print, here I use Windows Edge but you can of course use Edge or Chrome on other platforms. On Windows you may need to run that as Admin, it should be less than one blink, so fast I did not think it was done.

NOTE recently the switch --disable-gpu was removed from the options so may not be needed.

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf="C:\Users\WDAGUtilityAccount\Desktop\SandBox\division.pdf" --print-to-pdf-no-header "C:\Users\WDAGUtilityAccount\Desktop\SandBox\division.html"

Sample Image

However note that due to cross site security some images are missing so we need to ensure they are local and simply remove the remote part of url

Sample Image

Add this at the end just for a tidy approach </body></html> and use this as your heading

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- saved from url=https://stackoverflow.com/questions/71998862 -->
<html><head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Lorum Ipsum</title>

<meta name="GENERATOR" content="KJs Template Builder V 2022-04">

<meta http-equiv="Content-Style-Type" content="text/css"><style>
@media print {
  @page {
    /* For different margins – use the standard CSS margin property: north, east, south, west, here it is one value */
    margin: 0;

    /* Browser default, customisable by the user if using the print dialogue. */
    size: auto;

    /* Different width and height. here using stated width="1000" height="500" can be px or pt or cm. For square, just use one value or use name like A6 landscape; note this is over-riding any above size: but we need to bump up for browser rounding*/
    size: 1020px 520px;
  }
  body { margin: 0; }
}
</style></head><body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

Save a Pre Element as PDF with CSS