[英]html-pdf converters that are compatible with css flex-box
我正在尝试将 html 模板代码中的 pdf 放在一起。 我遇到的问题是我尝试过的 html-pdf 转换器没有正确格式化 css,我猜它们还不兼容 css flex-box。
我看过两种方法:
在 Node.js 上使用 html-pdf package
在 python 中使用 jinja2、pdfkit 和 wkhtmltopdf
Both approaches allow me to template the html and dynamically build a pdf from html but the css conversion does not 100% work (css flex-box fails).
关于可以处理 css flex-box 的 html 到 pdf 转换器的任何想法? 或者,有没有人知道上述方法的任何修复,以便他们可以处理 css flex-box? 只想从 css flex-box 风格的 html 制作 pdf。
谢谢!
您可以将 jsPDF 与 html 2 canvas 一起使用。
HTML2canvas 获取元素的 sreenshots 一个 js pdf 下载它们。
我在 html2canvas 库中发现它支持 flex。
这是一个示例(不使用 flex);
function savetopdf(){ var HTML_Width = $(".result").width(); var HTML_Height = $(".result").height(); var top_left_margin = 5; var PDF_Width = HTML_Width + (top_left_margin * 2); var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2); var canvas_image_width = HTML_Width; var canvas_image_height = HTML_Height; var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1; html2canvas($(".result")[0]).then(function (canvas) { var imgData = canvas.toDataURL("image/jpeg", 1.0); var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]); pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height); for (var i = 1; i <= totalPDFPages; i++) { pdf.addPage(PDF_Width, PDF_Height); pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height); } pdf.save("aswinwriter.pdf"); }); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="result" class="result"> Example </div> <button onclick="savetopdf()">TRY IT </button>
我将 pdfkit 与 python 一起使用,发现了同样的问题。 我可以使用这个页面来解决它。 该页面为 CSS 添加了前缀,并使其与旧版本兼容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.