save/download html div as image/pdf-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div  style="width: 1000px; height: 500px;">
    <div >
        <div  style="width: 0;height: 0;border-style: solid;border-width: 400px 0 0 250px; border-color: transparent transparent transparent #ffa447;"></div>
        <div  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  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 >
            <div >
                <h1  style="font-size: 40pt;">Lorem ipsum</h1>
            </div>
            <div >
                <div  style="width: 300px;">
                    <h1>Lorem ipsum</h1>
                </div>
            </div>
            <div >
                <div  style="width: 350px;">
                    <div >
                        <h4>Lorem</h4>
                    </div>
                    <div >
                        <h4>ipsum</h4>
                    </div>
                    <div >
                        <h4>Lorem</h4>
                    </div>
                    <div >
                        <h4>ipsum</h4>
                    </div>
                </div>
            </div>
            <div >
                <p  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 >
                <p  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  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  style="width: auto; max-width: 200px; background-color: rgba(255, 255, 255, 0.6);">
                <p >Lorem ipsum</p>
                <p >dolor sit</p>
                <div >
                    <p >amet, </p><p >consetetur</p>
                </div>
                <p >sadipscing</p>
                <p >elitr</p>
            </div>
        </div>
        <div  style="width: 0;height: 0;border-style: solid;border-width: 0 250px 400px 0;border-color: transparent #ffa447 transparent transparent;"></div>
        <div  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

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.

"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/[email protected]/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">