Flutter WebView中网页内置账单打印按钮失效，求解决方案

核心原因 #

网页端的打印功能通常依赖浏览器的window.print() API，但Flutter WebView默认不会处理这个JS调用，需要手动拦截并通过Flutter原生能力实现打印。

具体实现步骤 #

1. 依赖准备 #

确保使用webview_flutter包，在pubspec.yaml中添加依赖：

dependencies:
  webview_flutter: ^4.4.0

2. 拦截JS打印请求并处理 #

通过WebView的JavaScriptChannel拦截window.print()调用，搭配Flutter打印插件实现原生打印。

完整代码示例

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:printing/printing.dart';

class WebViewPrintPage extends StatefulWidget {
  final String url;
  const WebViewPrintPage({super.key, required this.url});

  @override
  State<WebViewPrintPage> createState() => _WebViewPrintPageState();
}

class _WebViewPrintPageState extends State<WebViewPrintPage> {
  late WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('账单打印')),
      body: WebView(
        initialUrl: widget.url,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          _webViewController = controller;
          // 注册JS通信通道
          controller.addJavaScriptChannel(
            'PrintChannel',
            onMessageReceived: (message) async {
              // 获取当前网页的HTML内容
              final htmlContent = await _webViewController.runJavascriptReturningResult(
                'document.documentElement.outerHTML'
              );
              if (htmlContent != null) {
                // 调用原生打印能力
                await Printing.layoutPdf(
                  onLayout: (format) async {
                    return await Printing.convertHtml(
                      format: format,
                      html: htmlContent,
                    );
                  },
                );
              }
            },
          );
          // 重写网页的window.print方法，定向到Flutter通道
          _webViewController.runJavascript('''
            window.print = function() {
              PrintChannel.postMessage('trigger-print');
            }
          ''');
        },
      ),
    );
  }
}

3. 补充配置 #

• 添加打印相关依赖到pubspec.yaml：

dependencies:
  printing: ^5.12.0

• 安卓端需在AndroidManifest.xml中添加基础权限：

<uses-permission android:name="android.permission.INTERNET" />

• 若网页仅需打印特定区域（比如账单容器），可修改JS代码精准获取内容：

document.getElementById('bill-container').outerHTML

4. 测试验证 #

运行应用后点击网页内的打印按钮，会触发Flutter原生打印弹窗，选择打印机即可完成打印。

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