如何解决使用html2pdf.js时移动端与桌面端PDF生成结果不一致问题?
货运标签移动端html2pdf.js生成异常问题
我正在开发一个自动生成货运标签的项目,使用html2pdf.js在桌面端生成的效果正常,但在移动端生成的结果出现异常。
以下是可正常运行的代码:
<html> <head> <title>Shipping Label</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); body { font-family: "Inter", sans-serif; margin: 0; } .adres { display: flex; flex-direction: column; /*align-items: center;*/ justify-content: center; padding-left: 100px; font-size: 70px; width: calc(100% - 100px); height: calc(100vh - 100px); } .postzegelcode { position: absolute; top: 10px; right: 10px; border: none; padding: 20px; } .logo { position: absolute; bottom: 10px; left: 10px; padding: 20px; padding-left: 100px; display: flex; align-items: center; font-size: 30px; } td { width: 50px; height: 45px; text-align: center; border: none; font-size: 40px; } </style> </head> <body> <div class="adres"> <span style="margin-bottom: 0px" >NAME<br />STREET<br />PLACE<br />POSTALCODE</span > </div> <table class="postzegelcode" border="1"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table> <div class="logo"> domain.com </div> <script> const content = document.body.innerHTML; document.body.innerHTML = content; // Reset body to remove any existing content const options = { filename: "pdf_document.pdf", image: { type: "jpeg", quality: 0.98 }, html2canvas: { scale: 2, windowWidth: 1024 }, jsPDF: { format: "a4", orientation: "landscape" } }; html2pdf() .set(options) .from(document.body) .toPdf() .get("pdf") .then((pdf) => { const blob = new Blob([pdf.output("blob")], { type: "application/pdf" }); const url = URL.createObjectURL(blob); window.location.href = url; // Open the PDF in the current tab }); </script> </body> </html>
我曾尝试将内容包裹在div中,并设置div的宽高为A4横向的比例,但未解决问题反而引发更多异常,上述代码是我能提供的唯一可正常运行的版本。
内容的提问来源于stack exchange,提问作者konijnvogel
相关产品推荐
相关产品推荐

