我正在嘗試將以下 div 保存為 PDF 或影像檔案。到目前為止，我在網上找到的解決方案的問題是clip-path屬性......
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 的不同方法，例如
這可以作為無頭列印運行，這里我使用 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://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">
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/465195.html
標籤：javascript php 图片 pdf 下载