Flutter Web调用window.print()打印页面出现空白问题求助

原因分析 #

Flutter Web默认使用CanvasKit渲染器时，UI内容绘制在Canvas上，浏览器的打印机制可能无法及时捕获渲染内容；或者调用window.print()的时机过早，Flutter还未完成UI渲染，导致打印空白。

方案一：延迟调用打印，确保渲染完成 #

通过给window.print()加延迟，等待Flutter完成UI渲染：

1. 在web/index.html中定义JS函数：

<script>
function printPage() {
  setTimeout(() => {
    window.print();
  }, 500); // 可根据页面复杂度调整延迟时间，比如300-1000ms
}
</script>

2. Flutter中调用该函数：

import 'dart:js' as js;

// 在需要触发打印的地方调用
void triggerPrint() {
  js.context.callMethod('printPage');
}

还可以结合Flutter的帧回调，确保UI绘制完成后再调用：

import 'dart:js' as js;
import 'package:flutter/material.dart';

void triggerPrint() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    js.context.callMethod('printPage');
  });
}

方案二：切换到HTML渲染器 #

如果使用CanvasKit渲染器无法正常捕获打印内容，切换到HTML渲染器试试：

1. 在web/index.html中添加强制渲染器配置：

<script>
  // 放在加载main.dart.js的代码之前
  window.flutterWebRenderer = "html";
  
  var serviceWorkerVersion = null;
  var scriptLoaded = false;
  function loadMainDartJs() {
    if (scriptLoaded) {
      return;
    }
    scriptLoaded = true;
    var scriptTag = document.createElement('script');
    scriptTag.src = 'main.dart.js';
    scriptTag.type = 'application/javascript';
    document.body.append(scriptTag);
  }
</script>

2. 重新构建Web项目：

flutter build web --web-renderer html

方案三：克隆Flutter DOM元素打印（复杂场景） #

手动克隆Flutter的根DOM元素到临时容器，确保打印时能捕获到内容：

import 'dart:js' as js;
import 'dart:html' as html;
import 'package:flutter/material.dart';

void triggerPrint() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // 获取Flutter的根容器（默认id为flutter_app）
    final flutterRoot = html.document.querySelector('#flutter_app');
    if (flutterRoot == null) return;

    // 创建临时打印容器
    final printContainer = html.DivElement();
    printContainer.style
      ..width = '100%'
      ..height = '100%'
      ..position = 'absolute'
      ..top = '0'
      ..left = '0'
      ..backgroundColor = 'white';

    // 克隆根元素到临时容器
    printContainer.append(flutterRoot.clone(true));
    html.document.body.append(printContainer);

    // 延迟打印后移除临时容器
    js.context.callMethod('setTimeout', [
      () {
        js.context.callMethod('print');
        printContainer.remove();
      },
      300
    ]);
  });
}

额外注意事项 #

• 检查页面的打印样式，确保没有元素被@media print规则隐藏：

@media print {
  /* 避免不必要的元素被隐藏 */
  body * {
    visibility: visible !important;
  }
}

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