将html div保存/下载为image/pdf

Question

我试图保存像下面这样的div作为PDF或图像文件。到目前为止，我在网上找到的解决方案的问题是clip-path属性.

​

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

​

到目前为止，我尝试了使用PHP或JS的不同方法，比如html2canvas或jsPDF，但是没有任何东西保存了div在浏览器中的显示方式。

Answer 1

HTML到PDF最简单的方法是使用浏览器输出，例如Chrome

​

​

这可以作为一个无头打印运行，这里我使用Windows，但您当然可以在其他平台上使用Edge或Chrome。在Windows上，您可能需要作为Admin运行它，它应该少于一次眨眼，所以我认为它没有完成。

注意：最近从选项中删除了开关--disable-gpu，所以可能不需要。

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

​

​

但是，请注意，由于跨站点安全性，一些图像丢失了，因此我们需要确保它们是本地的，只需删除url的远程部分。

​

​

为了保持整洁的方法，</body></html>，在结尾添加了这些内容，并将其用作标题

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