Flutter插件qz的使用方法

Flutter插件qz的使用方法

QZ Flutter插件

一个允许与JavaScript库 qz.io 进行交互的Flutter插件。

本地运行

  1. 获取并安装 QZ Tray
  2. 将JavaScript文件 qz-tray.jsqzSecurity.js 复制到你的项目中,并在 index.html 中引用它们(参见示例文件夹)。
<!-- web/index.html -->
<script src="js/qz-tray.js"></script>
<script src="js/qzSecurity.js"></script>

签名

你可以选择后端签名或前端签名来管理QZ证书,根据你的需求选择一种方法。根据你选择的方法,有一些步骤需要遵循。

  • 后端签名:使用此方法时,应该有一个带有必要路由的后端。更多信息请参阅文档
  • 前端签名:使用此方法时,你需要在 index.html 中导入 jsrsasign 库。
<!-- web/index.html -->

<!-- jsrsasign库用于JavaScript签名,在生产环境中,请下载并引用本地副本!-->
<script src="https://cdn.rawgit.com/kjur/jsrsasign/c057d3447b194fa0a3fdcea110579454898e093d/jsrsasign-all-min.js">
</script>

API参考

构造函数 Qz

参数 类型 描述
backendMode bool 如果设置为true,则会使用URL检查证书和签名,否则将使用字符串值检查证书和签名。默认值 false
certificateUrl String? 如果启用了 backendMode ,则需要此参数。表示证书文件的URL。
signatureUrl String? 如果启用了 backendMode ,则需要此参数。表示加密签名的端点。
certificateString String? 如果禁用了 backendMode ,则需要此参数。表示证书内容。
signatureString String? 如果禁用了 backendMode ,则需要此参数。表示私钥内容。
algorithm SHA1/SHA256/SHA512 必须与后端相同。如果你使用前端签名则跳过此参数。默认值 SHA512

Qz函数

String get version
  • 返回Qz的当前版本。
Future<dynamic> connect()
  • 检查是否有已连接的实例,如果没有则连接到QZ Tray。
Future<List<String>> getAllPrinters()
  • 返回系统中所有可用打印机的名称。
Future<dynamic> printPDF({String? printerName, String? base64, List<int>? blob, Uri? uri})
  • 使用 type: pixel 打印PDF。
Future<dynamic> printRaw({String? printerName, String? base64, List<int>? blob, Uri? uri})
  • 使用 type: rawformat: 'command' 打印任何内容,这在需要直接向打印机发送文件且由打印机决定如何打印时非常有用。
Future<dynamic> printZPL({String? printerName, required String zpl})
  • 使用ZPL代码打印文档,仅适用于ZPL打印机。

打印参数

  • printerName: 代表你要打印到的打印机的字符串,默认为默认系统打印机。
  • base64: 代表一个base64编码的PDF字符串,可选。
  • blob: 代表PDF blob数据的整数列表,可选。
  • uri: 包含PDF文件地址的 Uri 对象,可选。

重要 base64, bloburi 是互斥字段,即每次调用只能传递其中一个且不能同时为null。

示例代码

以下是一个完整的示例代码,展示了如何使用 qz 插件进行打印操作:

import 'package:flutter/material.dart';

import 'package:qz/qz.dart';
import 'package:qz_example/resources.dart';

void main() {
  runApp(const MyApp());
}

class PrinterWrapper {
  final String title;
  final String? name;

  const PrinterWrapper({
    required this.title,
    this.name,
  });

  [@override](/user/override)
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is PrinterWrapper &&
          runtimeType == other.runtimeType &&
          name == other.name;

  [@override](/user/override)
  int get hashCode => name?.hashCode ?? 0;
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _qzWebPlugin = Qz(
    certificateString: '''
      Your digital-certificate.txt value 
    ''',
    signatureString: '''
      Your private-key.pem value
    ''',
  );

  static const defaultPrinter = PrinterWrapper(title: 'Use default printer');
  PrinterWrapper? printer = defaultPrinter;
  String? pdfBase64Input;
  String zplSample = '''
^XA^FO17,16^GB379,371,8^FS^FT65,255^A0N,135,134^FDTEST^FS^XZ
  ''';

  String? errorText;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Running QZ Tray ${_qzWebPlugin.version}'),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  FutureBuilder(
                      future: _qzWebPlugin
                          .getAllPrinters()
                          .timeout(const Duration(seconds: 5)),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          final List<PrinterWrapper> printers = [
                            defaultPrinter,
                            ...snapshot.data
                                    ?.map((item) =>
                                        PrinterWrapper(title: item, name: item))
                                    .toList() ??
                                [],
                          ];
                          return DropdownButtonFormField<PrinterWrapper>(
                              value: printer,
                              items: printers
                                  .map((printer) =>
                                      DropdownMenuItem(
                                        value: printer,
                                        child: Text(printer.title),
                                      ))
                                  .toList(),
                              onChanged: (value) {
                                setState(() {
                                  printer = value;
                                });
                              });
                        }
                        if (snapshot.connectionState ==
                            ConnectionState.waiting) {
                          return const LinearProgressIndicator();
                        }
                        return Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            if (snapshot.hasError) ...[
                              Text(
                                '${snapshot.error?.toString()}\n Check you are using the correct "certificateString" and "signatureString" when building QZ plugin.',
                                textAlign: TextAlign.center,
                                style: Theme.of(context)
                                    .textTheme
                                    .titleMedium
                                    ?.copyWith(
                                        color: Theme.of(context)
                                            .colorScheme
                                            .error),
                              ),
                              const SizedBox(height: 8),
                            ],
                            ElevatedButton(
                              onPressed: () {
                                setState(() {});
                              },
                              child: const Text('Reload printers'),
                            ),
                          ],
                        );
                      }),
                  TextField(
                    decoration: InputDecoration(
                      hintText: 'Base64 string pdf',
                      errorText: errorText,
                    ),
                    onChanged: (value) {
                      pdfBase64Input = value;
                    },
                  ),
                  const SizedBox(height: 16),
                  ElevatedButton(
                      onPressed: () {
                        if (pdfBase64Input?.isEmpty ?? true) {
                          errorText = 'Base 64 PDF input can not be empty';
                          setState(() {});
                          return;
                        } else {
                          errorText = null;
                          setState(() {});
                        }
                        _qzWebPlugin.printPDF(
                            printerName: printer?.name, base64: pdfBase64Input);
                      },
                      child: const Text('Print PDF From Base64 Input')),
                  const SizedBox(height: 16),
                  ElevatedButton(
                      onPressed: () {
                        _qzWebPlugin.printPDF(
                            printerName: printer?.name,
                            base64: pdfBase64Sample);
                      },
                      child: const Text('Print PDF Bas64 Sample')),
                  const SizedBox(height: 16),
                  ElevatedButton(
                      onPressed: () {
                        _qzWebPlugin.printPDF(
                            printerName: printer?.name,
                            uri: Uri.tryParse('assets/ticket.pdf'));
                      },
                      child: const Text('Print PDF File Sample')),
                  const SizedBox(height: 16),
                  ElevatedButton(
                      onPressed: () {
                        _qzWebPlugin.printRaw(
                            printerName: printer?.name,
                            base64: pdfBase64Sample);
                      },
                      child: const Text('Print PDF Base64 Sample Raw')),
                  const SizedBox(height: 16),
                  ElevatedButton(
                      onPressed: () {
                        _qzWebPlugin.printRaw(
                            printerName: printer?.name,
                            uri: Uri.tryParse('assets/ticket.pdf'));
                      },
                      child: const Text('Print PDF File Sample Raw')),
                  const SizedBox(height: 16),
                  ElevatedButton(
                      onPressed: () {
                        _qzWebPlugin.printZPL(
                            printerName: printer?.name, zpl: zplSample);
                      },
                      child: const Text('Print ZPL Sample')),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter插件qz的使用方法的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter插件qz的使用方法的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,qz 并不是一个官方或广泛认可的插件,因此它可能是一个自定义插件、第三方插件,或者是一个拼写错误。如果你在项目中遇到 qz 插件,以下是一些探索和使用它的步骤:

1. 确认插件的来源

  • 查找插件的定义:在 pubspec.yaml 文件中查找 qz 插件的依赖项。例如:
    dependencies:
      qz: ^1.0.0
    
  • 检查插件的文档:如果 qz 是一个第三方插件,尝试查找它的官方文档或GitHub仓库。通常,插件作者会提供详细的使用说明。

2. 安装插件

  • 如果 qz 插件已经在 pubspec.yaml 中声明,运行以下命令安装插件:
    flutter pub get
    

3. 导入插件

  • 在需要使用 qz 插件的Dart文件中导入它:
    import 'package:qz/qz.dart';
    

4. 查看插件的API

  • 如果插件有文档,查看它提供的API和方法。如果没有文档,可以通过以下方式了解插件的功能:
    • 查看插件的源代码:在 pubspec.yaml 中声明依赖后,插件的源代码会自动下载到 flutter/.pub-cache/hosted/pub.dartlang.org/ 目录中。
    • 使用IDE的代码提示:在IDE中导入插件后,使用代码提示功能查看插件提供的类和方法。

5. 尝试使用插件

  • 根据插件的API,尝试在项目中使用它。例如,如果插件提供了某个功能类 QzClass,可以这样使用:
    void main() {
      var qzInstance = QzClass();
      qzInstance.someMethod();
    }
    

6. 调试和测试

  • 调试:如果插件的行为不符合预期,使用调试工具检查代码的执行情况。
  • 测试:编写单元测试或集成测试,确保插件的功能在项目中正常工作。

7. 查找社区支持

  • 如果遇到问题,可以在Flutter社区、GitHub Issues 或 Stack Overflow 上寻求帮助。提供插件的详细信息和你遇到的问题,以便其他人更好地帮助你。

8. 考虑替代方案

  • 如果 qz 插件无法满足需求,或者难以使用,考虑寻找其他功能相似的插件或自行实现所需功能。

示例代码

假设 qz 插件提供了一个简单的功能,例如打印消息,以下是一个示例代码:

import 'package:flutter/material.dart';
import 'package:qz/qz.dart'; // 导入qz插件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Qz Plugin Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              QzClass().printMessage('Hello, Qz!');
            },
            child: Text('Print Message'),
          ),
        ),
      ),
    );
  }
}
回到顶部