Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Flutter打印

Flutter实现打印功能的示例详解

作者:Jimmy

这篇文章主要为大家详细介绍了如何通过 Flutter 实现调用打印机打印的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

开发环境

我们通过 flutter create project_name 创建项目。

我们如何打印

关于调起 printer 打印的功能。我们有以下的想法:

针对第一点,我们并没有发现在 app 中有类似 window.print 的方法;而对第二点,我们也不能指定页面中 widget 进行打印。剩下的第三点和第四点,我们都可以实现。

接下来,我们将应用 flutter printing 包,来演示后两种实现方式。

引入 printing 包

引入 printing 很简单:

将 printing 包添加到我们的 pubspec.yaml 文件:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.13 # optional
  flutter_inappwebview: ^5.3.2 # optional

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  printing: ^5.12.0

webview_flutterflutter_inappwebview 是可选,笔者在调试 macos 的项目时候用到。printing 在编写本文时候的版本是 ^5.12.0,请以 官网 版本为主

然后,我们可以通过 flutter pub get 来获取包

打印组合的 widgets

下面,我们以一个简单的案例来说说怎么使用该包,并怎么打印组合的 widget

我们直接在项目的 main.dart 上操作:

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

上面引入 pdfprinting 相关包。

因为我们是在 macos 上进行调试,我们还需要在 macos/Runner/Release.entitlementsmacos/Runner/DebugProfile.entitlements 文件中添加内容:

<key>com.apple.security.print</key>
<true/>

如果是其他平台开发调试,请参考 printing 引入相关的内容。

之后我们在 main.dart 中实现相关的逻辑:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Print Demo'),
    ),
    body: Center(
      child: ElevatedButton(
        onPressed: _printPdf,
        child: Text('Print'),
      ),
    ),
  );
}

上面我们编写了相关的 widget,展示一个 Print 按钮,当点击按钮时候,触发方法 _printPdf,该方法的实现如下

Future<void> _printPdf() async {
  try {
    final doc = pw.Document();
    
    doc.addPage(pw.Page(
      pageFormat: PdfPageFormat.a4,
      build: (pw.Context context) {
        return pw.Center(
          child: pw.Text('Hello Jimmy'),
        );
      }
    ));
    
    await Printing.layoutPdf(  
      onLayout: (PdfPageFormat format) async => doc.save(),  
    );
  } catch (e) {
    print(e);
  } 
}

在这个方法中,我们在 addPage 中重新组合了需要打印的 widgets,然后调起打印机 Printing.layoutPdf,动态如下

那么,对于复杂的内容,如果我们还是编写自定义的 widgets 的话,那不切实际,维护成本高。那么,我们有什么方法打印它呢?这就是下面我们要介绍的了~

widgets 内容转 image,再打印 image

我们直接将页面上的 widgets 内容转换为 image,再结合上面提及的打印组合的 widgets 处理即可。

将 widgets 内容转 image

先上代码:

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey boundaryKey = GlobalKey();
  Uint8List _imageBytes = Uint8List(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget to Image Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RepaintBoundary(
              key: boundaryKey,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Hello, Jimmy!',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _capturePng,
              child: Text('Capture Image'),
            ),
            SizedBox(height: 20),
            if (!_imageBytes.isEmpty)
              Image.memory(
                _imageBytes,
                width: 200,
                height: 200,
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _capturePng() async {
    try {
      RenderRepaintBoundary? boundary =
      boundaryKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
      ui.Image? image = await boundary?.toImage(pixelRatio: 3.0);
      ByteData? byteData =
      await image?.toByteData(format: ui.ImageByteFormat.png);
      setState(() {
        _imageBytes = byteData!.buffer.asUint8List(); // 赋值
      });
    } catch (e) {
      print(e);
    }
  }
}

在代码中,我们用 RepaintBoundary 来指定了重绘的区域为 200*200 的文本值。当我们点击 ElevatedButton 挂件时候,会触发 _capturePng 方法。在 _capturePng 方法中,我们将区域内的内容转换为图像,并且,将图像转为位数据,给 _imageBytes 赋值,展现在页面上。相关 Gif 图如下

整合 Image 挂件

在上面的例子中,我们保存了生成的图数据。接下来,我们将该图片打印出来。上面的代码,我们在原始基础上更改:

ElevatedButton(
  onPressed: () => _capturePng(context),
  child: Text('Capture Image'),
),

引入包:

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

然后补充 _capturePng 方法:

Future<void> _capturePng(BuildContext ctx) async {
  try {
    // 添加 print
    final doc = pw.Document();

    RenderRepaintBoundary? boundary = boundaryKey.currentContext
      ?.findRenderObject() as RenderRepaintBoundary?;
    ui.Image? image = await boundary?.toImage(pixelRatio: 3.0);
    ByteData? byteData =
      await image?.toByteData(format: ui.ImageByteFormat.png);

    final pageFormat = PdfPageFormat.a4;
  
    print(MediaQuery.of(ctx).size.height); // 测试打印界面的高度

    doc.addPage(pw.Page(
      pageFormat: pageFormat,
      orientation: pw.PageOrientation.landscape,
      build: (pw.Context context) {
        return pw.Center(
          child: pw.Image( // 图像挂件
            pw.MemoryImage(_imageBytes),
            width: pageFormat.height - 20,
            fit: pw.BoxFit.fitWidth,
          ),
        );
      }));

    // 打印
    await Printing.layoutPdf(
      onLayout: (PdfPageFormat format) async => doc.save(),
    );
  } catch (e) {
    print(e);
  }
}

上面,我们通过 pw.MemoryImage(_imageBytes) 指定 Image 的内容,并调起打印机打印~

为了方便演示,看到边界,我们更改了下 UI

当然,我们可以设定其打印的边距和指定内容的方向等:

pw.Page(
  orientation: pw.PageOrientation.landscape, // 内容的方向
  margin: pw.EdgeInsets.all(16.0), // 边距
  ...
)

以上就是Flutter实现打印功能的示例详解的详细内容,更多关于Flutter打印的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文