save/download html div as image/pdf

Question

I am trying to save divs like the following one either as PDF or image file. The problem so far with solutions I found online are the clip-path attributes...

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="m-2">
  <div class="border border-5 d-flex" style="width: 1000px; height: 500px;">
    <div class="position-relative w-100 h-100">
        <div class="position-absolute start-0 bottom-0" style="width: 0;height: 0;border-style: solid;border-width: 400px 0 0 250px; border-color: transparent transparent transparent #ffa447;"></div>
        <div class="position-absolute start-0 top-0 h-100" style="background-color:blueviolet; width: 350px; clip-path: polygon(0 0, 100% 0, 40% 100%, 0% 100%); background-image: url('https://images.pexels.com/photos/842571/pexels-photo-842571.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'); background-repeat: no-repeat; background-size: cover;"></div>
        <div class="m-4 position-absolute start-0" style="height: 200px; width: 200px; background-color: black; color: white;  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/QR_deWP.svg/1200px-QR_deWP.svg.png'); background-repeat: no-repeat; background-size: cover;">
            QR
        </div>

        <div class="position-absolute top-50 start-50 translate-middle">
            <div class="d-flex justify-content-center text-center">
                <h1 class="mb-0 text-uppercase" style="font-size: 40pt;">Lorem ipsum</h1>
            </div>
            <div class="d-flex justify-content-center text-center">
                <div class="" style="width: 300px;">
                    <h1>Lorem ipsum</h1>
                </div>
            </div>
            <div class="d-flex justify-content-center text-center">
                <div class="row" style="width: 350px;">
                    <div class="col-2">
                        <h4>Lorem</h4>
                    </div>
                    <div class="col-10">
                        <h4>ipsum</h4>
                    </div>
                    <div class="col-2">
                        <h4>Lorem</h4>
                    </div>
                    <div class="col-10">
                        <h4>ipsum</h4>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center text-center">
                <p class="text-justify" style="width: 400px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
            </div>
            <div class="d-flex justify-content-center text-center mt-3">
                <p class="mb-0 text-justify small" style="width: 450px; padding-right: 110px;color: grey;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
            </div>
        </div>

        <div class="position-absolute end-0 bottom-0 h-100" style="background-color:blueviolet; width: 350px; clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%); background-image: url('https://images.pexels.com/photos/3338497/pexels-photo-3338497.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'); background-repeat: no-repeat; background-size: cover;">
            <div class="mb-4 p-2 position-absolute bottom-0 start-50 translate-middle-x small" style="width: auto; max-width: 200px; background-color: rgba(255, 255, 255, 0.6);">
                <p class="mb-0">Lorem ipsum</p>
                <p class="mb-0">dolor sit</p>
                <div class="d-flex">
                    <p class="mb-0 me-1">amet, </p><p class="mb-0">consetetur</p>
                </div>
                <p class="mb-0">sadipscing</p>
                <p class="mb-0">elitr</p>
            </div>
        </div>
        <div class="position-absolute end-0 top-0" style="width: 0;height: 0;border-style: solid;border-width: 0 250px 400px 0;border-color: transparent #ffa447 transparent transparent;"></div>
        <div class="m-3 position-absolute end-0 top-0" style="height: 125px; width: 125px; background-color: black; color: white; background-image: url('https://png.pngtree.com/png-clipart/20190515/original/pngtree-coffee-time-png-image_3626459.jpg'); background-repeat: no-repeat; background-size: cover;">
            logo
        </div>
    </div>
  </div>
</div>

I tried different approaches with PHP or JS like html2canvas or jsPDF so far, but nothing saved the div the way it is displayed inside the browser.

Answer 1

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

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"

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

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">