Preface:

Printing on the mobile phone has always been a headache. Printing with pictures is too large and the performance is poor. Instruction printing, poor maintainability, debugging trouble.

So I wrote a render print instruction library GitHub link with the following advantages

  1. Data binding support
  2. Template writing, using Xml as a design language, readable strong, no need to write dead in the code, can be hot replacement
  3. Preview effect
  4. CPCL and TSL instruction sets are supported
  5. There are Xml schemas that can detect authoring errors

The template effect


      
<page width="640" height="640" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
   xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/Im-Kevin/rare_print/master/schema/schema.xsd">
    <font-type fontType="YaHei24" fontBaseWidth="32" fontBaseHeight="41"></font-type>
    <printer-config fontType="YaHei24" fontSize="1">
        <page-info gapmMM="2"/>
    </printer-config>
    <column x="30">
        <stack height="126">
            <image binding="data.brandImage" y="20"/>
            <text align="center" fontSize="2" y="76">Product identification card</text>
        </stack>
        <column>
            <row height="50" y="30">
                <text width="90">Item description:</text>
                <text binding="data.familyName"></text>
            </row>
            <row height="50" y="18">
                <row width="310">
                    <text width="90">Type:</text>
                    <text binding="data.familyStyleName"></text>
                </row>
                <row width="310">
                    <text width="90">Color:</text>
                    <text binding="data.colorName"></text>
                </row>
            </row>
            <row height="50" y="18">
                <text width="90">Specifications:</text>
                <text binding="data.specName"></text>
            </row>
            <row>
                <column width="400">
                    <row height="50" y="18">
                        <text width="90">Quantity:</text>
                        <text binding="data.qty" width="auto"></text>
                        <text binding="data.um" width="100"></text>
                    </row>
                    <row height="50" y="18">
                        <text width="150">Production Department:</text>
                        <text binding="data.productionOu"></text>
                    </row>
                    <row height="50" y="18">
                        <text width="150">Verification:</text>
                        <text binding="data.inspectors"></text>
                    </row>
                    <row height="50" y="18">
                        <text width="150">Production Date:</text>
                        <text binding="data.date" format="Yyyy year MM month DD day"></text>
                    </row>
                </column> 
                <column>
                    <qrcode 
                        binding="'123213' + data.uniqueCode"
                        width="200"
                        height="200" 
                        imagePaint="true"></qrcode>
                    <text width="200" height="50" y="22" align="center" binding="data.uniqueCode"></text>
                </column>
            </row>
        </column>
    </column>
</page>

Copy the code

Usage:

Install dependencies

Dependencies: rare_print: ^ 0.1.2Copy the code

Import packages

import 'package:rare_print/rare_print.dart';
Copy the code

Write your own print templates

Printing function

    final demoXml = '
      
       ... 
      ' / / template
    var control = ControlBase.create(demoXml); // Parse the template

    var jsonData = json.decode(dataSource); // Convert json data source to Map

    control.setDataSource(DataSource(jsonData)); // Set the data source

    control.performLayout(PrinterConstraints(maxWidth: 837)); // Calculate the layout style
    CPCLCanvas canvas = CPCLCanvas(); // Create canvas
    canvas.pageSize = control.actualSize; // Set the canvas size
    canvas.reset(); // Reset the canvas

    control.paint(canvas, PrinterOffset.zero); // Render the canvas

    canvas.end(); // mark the end of the canvas rendering

    io.send(canvas.toCommand); // Output specific instructions
Copy the code

Implement preview function

    ControlBase control;
    @override
    void initState() {
        super.initState();
        final demoXml = '
      
       ... 
      ' / / template
        control = ControlBase.create(demoXml); // Parse the template

        var jsonData = json.decode(dataSource); // Convert json data source to Map

        control.setDataSource(DataSource(jsonData)); // Set the data source
    }

    @override
    Widget build(BuildContext context) {
        return PreviewWidget( // Use the PreviewWidget to display the effects
            control: control
        );
    }
Copy the code