Flutter Web如何实现页面原样打印？现有方案遇阻

方案1：Widget转图片生成PDF打印 #

通过RepaintBoundary捕获页面Widget的渲染内容，转为高清图片后插入PDF再打印，能完全还原复杂布局的视觉效果。

步骤：

• 给页面根Widget添加RepaintBoundary并绑定全局Key：

final GlobalKey _printKey = GlobalKey();

RepaintBoundary(
  key: _printKey,
  child: // 你的完整页面内容
)

• 捕获图片并生成打印用PDF：

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';

Future<void> printPage() async {
  final boundary = _printKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
  final image = await boundary.toImage(pixelRatio: 3.0); // 高像素比保证打印清晰度
  final byteData = await image.toByteData(format: ImageByteFormat.png);
  final pngBytes = byteData!.buffer.asUint8List();

  final pdf = pw.Document();
  pdf.addPage(
    pw.Page(
      build: (context) => pw.Image(pw.MemoryImage(pngBytes), fit: pw.BoxFit.contain),
    ),
  );

  await Printing.layoutPdf(onLayout: (format) async => pdf.save());
}

方案2：结合printing与flutter_widget_from_html（富文本/复杂排版场景） #

若页面包含大量富文本或动态排版内容，可先将布局转为统一的可渲染结构，再直接打印：

import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:printing/printing.dart';

Future<void> printComplexPage() async {
  // 可以是页面对应的HTML内容，或从Widget转换的结构化HTML
  final htmlContent = """
  <div>你的页面富文本/布局内容</div>
  """;

  await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
    final doc = pw.Document();
    doc.addPage(
      pw.Page(
        build: (context) => pw.Expanded(
          child: pw.FlutterWidget(
            HtmlWidget(htmlContent),
          ),
        ),
      ),
    );
    return doc.save();
  });
}

方案3：原生平台适配（极端复杂组件场景） #

• Android/iOS：通过MethodChannel调用原生API直接捕获屏幕内容并触发打印，能100%还原自定义组件效果，适合Flutter组件无法通过常规方式捕获的场景。
• Web端：避开dart:html的复杂操作，直接调用浏览器原生打印能力，配合CSS打印样式优化：

@media print {
  .non-printable { display: none; } /* 隐藏无需打印的元素 */
  body { margin: 0; padding: 0; }
}

Flutter Web中通过dart:js触发打印：

import 'dart:js' as js;

void printWebPage() {
  js.context.callMethod('print');
}

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