save/download html div 作为 image/pdf
save/download html div as image/pdf
我正在尝试将 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 或 html2canvas or jsPDF 等 JS 的不同方法，但没有任何方法可以保存 div 它在浏览器中的显示方式。
HTML 到 PDF 的最简单方法是使用浏览器输出，例如Chrome
这可以运行作为无头打印，这里我使用Windows Edge，但你当然可以在其他平台上使用Edge或Chrome。在 Windows 上，您可能需要 运行 作为管理员，它应该少于一眨眼，如此之快，我认为它已经完成了。
"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://whosebug.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">
我正在尝试将 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 或 html2canvas or jsPDF 等 JS 的不同方法，但没有任何方法可以保存 div 它在浏览器中的显示方式。
HTML 到 PDF 的最简单方法是使用浏览器输出，例如Chrome
这可以运行作为无头打印，这里我使用Windows Edge，但你当然可以在其他平台上使用Edge或Chrome。在 Windows 上，您可能需要 运行 作为管理员，它应该少于一眨眼，如此之快，我认为它已经完成了。
"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://whosebug.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">