无法删除在 flutter iOS 中使用 html/css 创建的 pdf 的页面外边距

Question

我正在尝试删除使用 flutter-iOS-app 中的 Html/css 创建的 PDF 的外部白边。 在 android 的情况下布局工作正常 但在 iOS 的情况下存在 left-margin 问题，如 iOS 的附件所示.

使用 DartPdf 在 Github 发布： Issue at DartPdf

使用 flutter_html_to_pdf 在 Github 发布： Issue at flutter_html_to_pdf

我使用这些库将 html 转换并呈现为 pdf。

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  pdf: ^1.3.17
  printing: ^2.0.0
  flutter_full_pdf_viewer: ^1.0.4

将 html 打印为 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: 使用此属性保证金问题 在 android 中解决但仍无法处理 iOS案例.

@page {
        size: A4;
        margin: 0mm 0mm 0mm 0mm;
    }

body {
        margin: 0px;
        padding: 0px;
    }

Android截图：

iOS 截图：

所需结果： pdf 将仅包含深绿色布局并删除 iOS 和 android 中的外部白色间距。

注意（当2页或更多页时）： Incase of iOS when using this format 属性 (format: PdfPageFormat.a4 .applyMargin(left: 0, top: 0, right: 0, bottom: 0))，当PDF拆分时，一些视图或数据不可见或隐藏。

Answer 1

试试这个

css

@media print {
  body {
    margin: 0 !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
  }
}

Answer 2

最终这将解决打印问题：

我们必须使用 copyWith(..) 来设置边距。 applyMargin(..) 只会增加您已有的保证金。而且您还必须使用提供的论文格式：

await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
  return await Printing.convertHtml(
      format: format.copyWith(marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom: 0),
      html: '<?xml version="1.0"?><html><body style="margin:0;padding:0" bgcolor="#144434"><h1 style="color:white">Test Layout Margin</h1></body></html>');
});

无法删除在 flutter iOS 中使用 html/css 创建的 pdf 的页面外边距

Unable to remove the page outer margin of the pdf which is created using html/css in flutter iOS

html

css

pdf-generation

ios

flutter