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

cgfeq70w  于 2023-08-07  发布在  Flutter
关注(0)|答案(3)|浏览(123)

我正试图删除使用Flutter-iOS-app中的Html/css创建的PDF的外部白色边。在Android的情况下,布局工作正常但在iOS的情况下,有左边距问题,如iOS的附件所示。

使用DartPdf在Github发布:Issue at DartPdf
在Github上使用flutter_html_to_pdf发布: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;
    }

安卓截图:

x1c 0d1x的数据

iOS截图:


**必填结果:**PDF将只包含绿色布局,并在iOS和Android中删除外部白色间距。
**注意(2页以上时):**iOS情况下使用此格式属性时(格式:PdfPageFormat.a4 .applyMargin(左:0,顶部:0,右侧:0,底部:0)),当PDF拆分时,某些视图或数据不可见或隐藏。

9o685dep

9o685dep1#

最后解决打印问题:

我们必须使用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>');
});

字符串

ccgok5k5

ccgok5k52#

试试这个
联系我们

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

字符串

eit6fx6z

eit6fx6z3#

将此代码写在页面顶部

@page {
  margin: 0cm 0cm;
  padding: 0cm 0cm;
}

body {
  margin-top: 0cm;
  padding-top: 0cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
  margin-bottom: 1.2cm;
}

字符串

相关问题