Flutter：如何让WebView截图生成的PDF图片填满整页无边距？

我在Flutter中使用screenshot和pdf包捕获WebView的截图并转换为PDF打印，但生成的PDF在打印对话框中打开时，图片四周总是存在边距。

我的代码如下：

Future<void> printWebView() async {
  screenshotController.capture().then((image) async {
    try {
      await Printing.layoutPdf(
        onLayout: (PdfPageFormat format) async => convertImageToPdf(image!).save(),
      );
    } catch (e) {
      print(e);
    }
  }).catchError((onError) {
    print(onError);
  });
}

pw.Document convertImageToPdf(Uint8List screenshotImage) {
  final image = pw.MemoryImage(screenshotImage);
  final pdfObj = pw.Document();
  pdfObj.addPage(pw.Page(
    pageFormat: PdfPageFormat.a4,
    build: (pw.Context context) {
      return pw.Center(child: pw.Image(image));
    }
  ));
  return pdfObj;
}

效果：图片四周存在明显边距（打印预览中图片未填满整个页面）

我尝试过使用Expanded组件并将fit设置为BoxFit.contain，但都没有效果。

如何让图片填满整个PDF页面且无任何边距？

解决方法 #

要让图片完全填满PDF页面，需要从移除页面默认边距和适配图片尺寸两个核心点调整：

1. 移除PDF页面的默认边距 #

PdfPageFormat.a4自带默认边距，需手动将四边边距设为0：

final noMarginA4 = PdfPageFormat.a4.copyWith(
  marginLeft: 0,
  marginRight: 0,
  marginTop: 0,
  marginBottom: 0,
);

2. 让图片铺满整个页面 #

取消Center包裹，直接让图片匹配页面尺寸，并设置合适的填充模式：

修改后的convertImageToPdf方法：

pw.Document convertImageToPdf(Uint8List screenshotImage) {
  final image = pw.MemoryImage(screenshotImage);
  final pdfObj = pw.Document();
  // 定义无边距的A4页面格式
  final noMarginA4 = PdfPageFormat.a4.copyWith(
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0,
    marginBottom: 0,
  );
  pdfObj.addPage(pw.Page(
    pageFormat: noMarginA4,
    build: (pw.Context context) {
      return pw.Image(
        image,
        fit: pw.BoxFit.fill, // 拉伸图片填满页面，若要保持比例用BoxFit.cover
        width: noMarginA4.width,
        height: noMarginA4.height,
      );
    }
  ));
  return pdfObj;
}

额外说明 #

• 若截图宽高比与A4（210×297mm）不一致：
  • BoxFit.fill会拉伸图片适配页面；
  • BoxFit.cover会保持比例并裁剪超出部分，填满页面；
  • BoxFit.contain会完整显示图片，但可能出现留白（需保证截图比例与A4一致才可消除）。
• 部分系统打印对话框自带默认边距，可在打印设置中勾选「无边距打印」选项配合使用。

内容的提问来源于stack exchange，提问作者Amy