Printing 颤振捕捉小部件的图像，然后创建PDF文件到打印机_Printing_Flutter

Printing 颤振捕捉小部件的图像，然后创建PDF文件到打印机

printing flutter

Printing 颤振捕捉小部件的图像，然后创建PDF文件到打印机,printing,flutter,Printing,Flutter,我的Flitter应用程序将小部件捕获到图像，然后创建PDF文件到打印机，但它显示了可笑的结果，如下图所示如果您有更好的方法将汉字和qr图像打印到75毫米纸宽的收据蓝牙打印机上，请告诉我下面是小部件： RepaintBoundary( key: _renderObjectKey, child: ListView( children: <Widget>[ Form( key: tableNumber

我的Flitter应用程序将小部件捕获到图像，然后创建PDF文件到打印机，但它显示了可笑的结果，如下图所示

如果您有更好的方法将汉字和qr图像打印到75毫米纸宽的收据蓝牙打印机上，请告诉我

下面是小部件：

RepaintBoundary(
      key: _renderObjectKey,
      child: ListView(
        children: <Widget>[
          Form(
            key: tableNumberFormKey,
            child:
            ListTile(
              title: TextFormField(
                initialValue: "",
                style: TextStyle(fontSize: 48.0),
                textAlign: TextAlign.center,
                maxLength: 4,
                keyboardType: TextInputType.phone,
                onSaved: (val) => inputTableNumber = val.toString(),
                validator: (val) => val.isEmpty ? '' : null,
                decoration: new InputDecoration(
                  labelText: "輸入檯號",
                  hintText: "例如：12",
                ),
              ),
            ),
          ),
          FlatButton(
            textColor: Colors.blueAccent,
            child: Text(
              "列印 QR CODE",
              style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0),
            ),
            color: Colors.transparent,
            onPressed: () {
              _showQRandPrint();
              SystemChannels.textInput.invokeMethod('TextInput.hide');
            },
          ),
          inputTableNumber == ""
              ? ListTile(title: Text(''),)
              : Center(
            child: QrImage(
              data: qrString,
              size: 300.0,
              version: 10,
              backgroundColor: Colors.white,
            ),
          ),

        ],
      ),
    );

这里有创建图像和pdf到打印机的功能

void _showQRandPrint() {
    final FormState form = tableNumberFormKey.currentState;

    if (form.validate()) {
      form.save();

      _getWidgetImage().then((img) {
        final pdf = new PDFDocument();
        final page = new PDFPage(pdf, pageFormat: PDFPageFormat(75.0, 100.0));
        final g = page.getGraphics();
        final font = new PDFFont(pdf);

        PDFImage image = new PDFImage(
            pdf,
            image: img,
            width: 75,
            height: 100);
        g.drawImage(image, 0.0, 0.0);

        Printing.printPdf(document: pdf);
      });

    }
    else {
      setState(() {
        inputTableNumber = "";
      });
    }
  }

  Future<Uint8List> _getWidgetImage() async {
    try {
      RenderRepaintBoundary boundary =
      _renderObjectKey.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      ByteData byteData =
      await image.toByteData(format: ui.ImageByteFormat.png);
      var pngBytes = byteData.buffer.asUint8List();
      var bs64 = base64Encode(pngBytes);
      debugPrint(bs64.length.toString());
      return pngBytes;
    } catch (exception) {}
  }

结果图片预览：

屏幕上的小部件是：

几个错误：

PDFPageFormat75.0、100.0是pdf本机维度。如果需要毫米，请执行以下操作：

PDFPageFormat(75.0 * PDFPageFormat.MM, 100.0 * PDFPageFormat.MM)

声明图像时，必须传递像素大小

并且图像不能是png，而是rawRgba数据：

// var img = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
PDFImage image = new PDFImage(
        pdf,
        image: img.buffer.asUint8List(),
        width: img.width,
        height: img.height);

pdf坐标系在页面的左下角有0,0，并且仍然是pdf单位因此，您必须使用：

g.drawImage(image, 100.0 * PDFPageFormat.MM, 0.0, 75.0* PDFPageFormat.MM);

第三个参数设置宽度。计算高度以保持纵横比

也许你必须调整这个以使图像居中，但在屏幕上有一个例子