I am currently facing an issue with the PDF generated from Html/css in my flutter iOS app. While the layout appears fine on Android, there seems to be a problem with left margins when it comes to iOS, as illustrated in the attachment provided.
For reference: Issue at DartPdf
For further information: Issue at flutter_html_to_pdf
The libraries I have utilized for converting and rendering html to pdf are mentioned below.
pubspec.yaml
dev_dependencies:
flutter_test:
sdk: flutter
pdf: ^1.3.17
printing: ^2.0.0
flutter_full_pdf_viewer: ^1.0.4
Method to print html as PDF:
Future<void> printPdfMethod() async {
print('Print ...');
await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
return await Printing.convertHtml(
format: PdfPageFormat.a4
.applyMargin(left: 0, top: 0, right: 0, bottom: 0),
html:
'<?xml version="1.0"?> <html> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @page { size: A4; margin: 0mm 0mm 0mm 0mm; padding:0mm 0mm 0mm 0mm; } body { margin: 0px; padding: 0px; position: static; width:100%; height:100%; } </style> </head> <body style="margin:0;padding:10" bgcolor="#144434"> <h1 style="color:white">Test Layout Margin</h1></body> </html>');
});
}
style-property: While this property resolves the margin issue for android, it is still ineffective for iOS.
@page {
size: A4;
margin: 0mm 0mm 0mm 0mm;
}
body {
margin: 0px;
padding: 0px;
}
Android Screenshot:
https://i.sstatic.net/ZYIaX.jpg
iOS Screenshot:
https://i.sstatic.net/xOfel.jpg
Required Result: The pdf should only display the dark green layout without any outer white spacing on both iOS and android.
Note(When 2 or more pages): In case of iOS, using the aforementioned format property (format: PdfPageFormat.a4 .applyMargin(left: 0, top: 0, right: 0, bottom: 0)), results in some views or data being invisible or hidden when the PDF is split into multiple pages.