将 html div 保存/下载为图像/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 的最简单方法是使用浏览器输出，例如铬合金

这可以作为无头打印运行，这里我使用 Windows Edge，但您当然可以在其他平台上使用 Edge 或 Chrome。在 Windows 上，您可能需要以管理员身份运行它，它应该少于一眨眼，如此之快，我认为它没有完成。

笔记最近开关--disable-gpu 已从选项中删除，因此可能不需要。

"C:Program Files (x86)MicrosoftEdgeApplicationmsedge.exe" --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf="C:UsersWDAGUtilityAccountDesktopSandBoxdivision.pdf" --print-to-pdf-no-header "C:UsersWDAGUtilityAccountDesktopSandBoxdivision.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">