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

害羞小萌

目录

• 开发环境
  
• 我们如何打印
  
• 引入 printing 包
  
• 打印组合的 widgets
  
• widgets 内容转 image，再打印 image
  
  
  
  • 将 widgets 内容转 image
    
  • 整合 Image 挂件
    
  
  

开发环境

• 1. Flutter Version

  复制代码
  ：3.16.4
  
• 系统：
  1. macOS Sonoma

  复制代码
  -
  1. Apple M1

  复制代码
  芯片
  
• 1. Android Studio

  复制代码
  ： 17.0.7
  

我们通过

1. flutter create project_name

复制代码

创建项目。

我们如何打印

关于调起

1. printer

复制代码

打印的功能。我们有以下的想法：

• 打印当前路由页面的内容，类似于网页的调用
  1. window.print

  复制代码
  方式打印
  
• 打印页面中指定的
  1. widget

  复制代码
  的内容
  
• 打印重组的
  1. widget

  复制代码
  的内容
  
• 将页面指定的
  1. widget

  复制代码
  转化为
  1. image

  复制代码
  之后，再调起打印
  

针对第一点，我们并没有发现在

1. app

复制代码

中有类似

1. window.print

复制代码

的方法；而对第二点，我们也不能指定页面中

1. widget

复制代码

进行打印。剩下的第三点和第四点，我们都可以实现。
接下来，我们将应用

1. flutter printing

复制代码

包，来演示后两种实现方式。

引入 printing 包

引入 printing 很简单：
将

1. printing

复制代码

包添加到我们的

1. pubspec.yaml

复制代码

文件：

1. dependencies:
   
2.   flutter:
   
3.     sdk: flutter
   
4.   webview_flutter: ^2.0.13 # optional
   
5.   flutter_inappwebview: ^5.3.2 # optional
   
6. 
   
7.   # The following adds the Cupertino Icons font to your application.
   
8.   # Use with the CupertinoIcons class for iOS style icons.
   
9.   cupertino_icons: ^1.0.2
   
10.   printing: ^5.12.0

复制代码

1. webview_flutter

复制代码

和

1. flutter_inappwebview

复制代码

是可选，笔者在调试

1. macos

复制代码

的项目时候用到。

1. printing

复制代码

在编写本文时候的版本是

1. ^5.12.0

复制代码

，请以 官网 版本为主
然后，我们可以通过

1. flutter pub get

复制代码

来获取包

打印组合的 widgets

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

1. widget

复制代码

。
我们直接在项目的

1. main.dart

复制代码

上操作：

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

复制代码

上面引入

1. pdf

复制代码

和

1. printing

复制代码

相关包。
因为我们是在

1. macos

复制代码

上进行调试，我们还需要在

1. macos/Runner/Release.entitlements

复制代码

和

1. macos/Runner/DebugProfile.entitlements

复制代码

文件中添加内容：

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

复制代码

如果是其他平台开发调试，请参考 printing 引入相关的内容。
之后我们在

1. main.dart

复制代码

中实现相关的逻辑：

1. @override
   
2. Widget build(BuildContext context) {
   
3.   return Scaffold(
   
4.     appBar: AppBar(
   
5.       title: Text('Print Demo'),
   
6.     ),
   
7.     body: Center(
   
8.       child: ElevatedButton(
   
9.         onPressed: _printPdf,
   
10.         child: Text('Print'),
    
11.       ),
    
12.     ),
    
13.   );
    
14. }

复制代码

上面我们编写了相关的

1. widget

复制代码

，展示一个

1. Print

复制代码

按钮，当点击按钮时候，触发方法

1. _printPdf

复制代码

，该方法的实现如下

1. Future<void> _printPdf() async {
   
2.   try {
   
3.     final doc = pw.Document();
   
4.    
   
5.     doc.addPage(pw.Page(
   
6.       pageFormat: PdfPageFormat.a4,
   
7.       build: (pw.Context context) {
   
8.         return pw.Center(
   
9.           child: pw.Text('Hello Jimmy'),
   
10.         );
    
11.       }
    
12.     ));
    
13.    
    
14.     await Printing.layoutPdf(  
    
15.       onLayout: (PdfPageFormat format) async => doc.save(),  
    
16.     );
    
17.   } catch (e) {
    
18.     print(e);
    
19.   }
    
20. }

复制代码

在这个方法中，我们在

1. addPage

复制代码

中重新组合了需要打印的

1. widgets

复制代码

，然后调起打印机

1. Printing.layoutPdf

复制代码

，动态如下

那么，对于复杂的内容，如果我们还是编写自定义的

1. widgets

复制代码

的话，那不切实际，维护成本高。那么，我们有什么方法打印它呢？这就是下面我们要介绍的了～

widgets 内容转 image，再打印 image

我们直接将页面上的

1. widgets

复制代码

内容转换为

1. image

复制代码

，再结合上面提及的打印组合的

1. widgets

复制代码

处理即可。

将 widgets 内容转 image

先上代码：

1. import 'dart:typed_data';
   
2. import 'dart:ui' as ui;
   
3. import 'package:flutter/material.dart';
   
4. import 'package:flutter/rendering.dart';
   
5. import 'package:flutter/services.dart';
   
6. 
   
7. class _MyHomePageState extends State<MyHomePage> {
   
8.   final GlobalKey boundaryKey = GlobalKey();
   
9.   Uint8List _imageBytes = Uint8List(0);
   
10. 
    
11.   @override
    
12.   Widget build(BuildContext context) {
    
13.     return Scaffold(
    
14.       appBar: AppBar(
    
15.         title: Text('Widget to Image Demo'),
    
16.       ),
    
17.       body: Center(
    
18.         child: Column(
    
19.           mainAxisAlignment: MainAxisAlignment.center,
    
20.           children: <Widget>[
    
21.             RepaintBoundary(
    
22.               key: boundaryKey,
    
23.               child: Container(
    
24.                 width: 200,
    
25.                 height: 200,
    
26.                 color: Colors.blue,
    
27.                 child: Center(
    
28.                   child: Text(
    
29.                     'Hello, Jimmy!',
    
30.                     style: TextStyle(
    
31.                       color: Colors.white,
    
32.                       fontSize: 24,
    
33.                     ),
    
34.                   ),
    
35.                 ),
    
36.               ),
    
37.             ),
    
38.             SizedBox(height: 20),
    
39.             ElevatedButton(
    
40.               onPressed: _capturePng,
    
41.               child: Text('Capture Image'),
    
42.             ),
    
43.             SizedBox(height: 20),
    
44.             if (!_imageBytes.isEmpty)
    
45.               Image.memory(
    
46.                 _imageBytes,
    
47.                 width: 200,
    
48.                 height: 200,
    
49.               ),
    
50.           ],
    
51.         ),
    
52.       ),
    
53.     );
    
54.   }
    
55. 
    
56.   Future<void> _capturePng() async {
    
57.     try {
    
58.       RenderRepaintBoundary? boundary =
    
59.       boundaryKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
    
60.       ui.Image? image = await boundary?.toImage(pixelRatio: 3.0);
    
61.       ByteData? byteData =
    
62.       await image?.toByteData(format: ui.ImageByteFormat.png);
    
63.       setState(() {
    
64.         _imageBytes = byteData!.buffer.asUint8List(); // 赋值
    
65.       });
    
66.     } catch (e) {
    
67.       print(e);
    
68.     }
    
69.   }
    
70. }

复制代码

在代码中，我们用

1. RepaintBoundary

复制代码

来指定了重绘的区域为

1. 200*200

复制代码

的文本值。当我们点击

1. ElevatedButton

复制代码

挂件时候，会触发

1. _capturePng

复制代码

方法。在

1. _capturePng

复制代码

方法中，我们将区域内的内容转换为图像，并且，将图像转为位数据，给

1. _imageBytes

复制代码

赋值，展现在页面上。相关

1. Gif

复制代码

图如下

整合 Image 挂件

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

1. ElevatedButton(
   
2.   onPressed: () => _capturePng(context),
   
3.   child: Text('Capture Image'),
   
4. ),

复制代码

引入包：

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

复制代码

然后补充

1. _capturePng

复制代码

方法：

1. Future<void> _capturePng(BuildContext ctx) async {
   
2.   try {
   
3.     // 添加 print
   
4.     final doc = pw.Document();
   
5. 
   
6.     RenderRepaintBoundary? boundary = boundaryKey.currentContext
   
7.       ?.findRenderObject() as RenderRepaintBoundary?;
   
8.     ui.Image? image = await boundary?.toImage(pixelRatio: 3.0);
   
9.     ByteData? byteData =
   
10.       await image?.toByteData(format: ui.ImageByteFormat.png);
    
11. 
    
12.     final pageFormat = PdfPageFormat.a4;
    
13.   
    
14.     print(MediaQuery.of(ctx).size.height); // 测试打印界面的高度
    
15. 
    
16.     doc.addPage(pw.Page(
    
17.       pageFormat: pageFormat,
    
18.       orientation: pw.PageOrientation.landscape,
    
19.       build: (pw.Context context) {
    
20.         return pw.Center(
    
21.           child: pw.Image( // 图像挂件
    
22.             pw.MemoryImage(_imageBytes),
    
23.             width: pageFormat.height - 20,
    
24.             fit: pw.BoxFit.fitWidth,
    
25.           ),
    
26.         );
    
27.       }));
    
28. 
    
29.     // 打印
    
30.     await Printing.layoutPdf(
    
31.       onLayout: (PdfPageFormat format) async => doc.save(),
    
32.     );
    
33.   } catch (e) {
    
34.     print(e);
    
35.   }
    
36. }

复制代码

上面，我们通过

1. pw.MemoryImage(_imageBytes)

复制代码

指定

1. Image

复制代码

的内容，并调起打印机打印～
为了方便演示，看到边界，我们更改了下 UI

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

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

复制代码

以上就是Flutter实现打印功能的示例详解的详细内容，更多关于Flutter打印的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

人渣派汗

路过，支持一下

是非与曲直芍

感谢楼主，顶。

醉生梦死有空醉y

感谢楼主分享。

小秋温柔温g

顶顶更健康！！！