Problem description: I am using html2pdf to convert HTML to PDF, but I found that some CSS styles (such as flexbox) are not rendered correctly. I expected the PDF to maintain the same layout as the web page, but the generated PDF has incorrect styles.
java code:
public static byte[] createPDF(String htmlTmpStr, String fontFile) throws Exception { ByteArrayOutputStream outputStream = null; byte[] result = null; outputStream = new ByteArrayOutputStream(); ITextRenderer renderer = new ITextRenderer(); renderer.setDocumentFromString(htmlTmpStr); renderer.getSharedContext().setReplacedElementFactory(new B64ImgReplacedElementFactory()); renderer.getSharedContext().getTextRenderer().setSmoothingThreshold(1); ITextFontResolver fontResolver = renderer.getFontResolver(); fontResolver.addFont(fontFile, BaseFont.IDENTITY_H, BaseFont.EMBEDDED); renderer.layout(); renderer.createPDF(outputStream); result = outputStream.toByteArray(); outputStream.flush(); outputStream.close(); return result; } css code:
<style type="text/css"> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: "Arial"; } @media print { body { -webkit-print-color-adjust: exact; } } @media print { @page { size: 80mm 80mm; margin-top: 0; margin-right: 1rem; margin-bottom: 0; margin-left: 0; min-height: auto; } html, .content { width: 80mm; height: 85mm; content: "."; } } .content.page-break { display: block; page-break-after: always; } .content { width: 80mm; height: 85mm; background-color: white; position: relative; margin: 4px; } .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .line-clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .module { overflow: hidden; } .line { line-height: 12px; } .items :last-child { border-bottom: 1px dotted; } #process-bar { margin:auto; position: fixed; z-index: 1000; width: 98%; height: 8px; top: 50%; left: 50%; transform: translate(-50%,-50%); } .w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover { color: #000 !important; background-color: #f1f1f1 !important; } .w3-round, .w3-round-medium { border-radius: 4px; } .w3-round-large { border-radius: 8px; } .w3-green, .w3-hover-green:hover { color: #ff8328 !important; background-color: #ff8328 !important; height: 8px; font-size: 1px; } </style> Error message: There was no error reported, but the flex layout in the generated PDF is invalid and the text is left-aligned. The attempted solutions: We tried modifying the CSS, but the layout did not meet the requirements. We consulted the documentation of html2pdf and found that it might not support some modern CSS features. Question: Are there any other Java libraries that can better support modern CSS?
