无法删除在 Flutter iOS 中使用 html/css 创建的 pdf 的页面外边距
Posted
技术标签:
【中文标题】无法删除在 Flutter iOS 中使用 html/css 创建的 pdf 的页面外边距【英文标题】：Unable to remove the page outer margin of the pdf which is created using html/css in flutter iOS 【发布时间】：2020-01-03 15:24:20 【问题描述】：我正在尝试删除在 Flutter-ios-app 中使用 html/css 创建的 PDF 的外白边距。 在android的情况下布局工作正常但在iOS的情况下存在左边距问题，如iOS的附件所示。
Github 上使用 DartPdf 的问题： 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;
Android 屏幕截图：
iOS 屏幕截图：
要求的结果： pdf 将仅包含深绿色布局，并在 iOS 和 android 中删除外部白色间距。
注意（当 2 页或更多页时）： iOS 的情况下使用此格式属性（格式：PdfPageFormat.a4 .applyMargin(left: 0, top: 0, right: 0, bottom: 0))，PDF拆分时部分视图或数据不可见或隐藏。
【问题讨论】：
【参考方案1】：试试这个
css
@media print
body
margin: 0 !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
【讨论】：
请分享实时链接..我会检查并让你知道 我已经在上面提到了代码。它仅适用于网络，但不适用于 iOS 应用程序。您可以在模拟器中尝试上述代码。谢谢！ 请看一下我提到的另一个答案。这个答案由 dart_pdf 库的创建者 @dav 给出。谢谢！【参考方案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 的页面外边距的主要内容，如果未能解决你的问题，请参考以下文章
在 pubspec.yaml 中添加 Google Maps 包后，Flutter iOS 应用程序将无法构建
无法使用 firebase_messaging 在 iOS 上的 Flutter 应用中订阅主题