在创建 pdf 时，图像未在 Flutter 中显示

Posted 2023-02-23

【中文标题】在创建 pdf 时，图像未在 Flutter 中显示

【英文标题】：Image not showing in Flutter on pdf creation

【发布时间】：2020-07-11 18:36:43

【问题描述】：

我有一个问题，在生成 pdf 时，来自资产的图像没有呈现在屏幕上。

我安装了 pdf 和打印包。打印包用于从我的图像文件夹加载图像。

这是我的代码

final pdf = pw.Document(deflate: zlib.encode);

writeOnPdf() async 

const imageProvider = const AssetImage('images/sig1.png');

final PdfImage sig1 = await pdfImageFromImageProvider(pdf: pdf.document, image: imageProvider);

pdf.addPage(pw.Page(
  pageFormat: PdfPageFormat.a4,
  build: (pw.Context context) 
    return pw.Column(
      children: [
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
          children: [
            pw.Text("Dexandra Inventory", style: pw.TextStyle(fontSize: 28.0)),
            pw.Text("RECEIPT#1", style: pw.TextStyle(fontSize: 28.0))
          ]
        ),
        pw.SizedBox(
          height: 30.0
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.start,
          children: [
            pw.Text("Luqman [phone]", style: pw.TextStyle(fontSize: 18.0)),
          ]
        ),
        pw.SizedBox(
            height: 30.0
        ),
        pw.Header(
          level: 0,
          child: pw.Text("1 Item (Qty:2)", style: pw.TextStyle(fontSize: 22.0))
        ),
        pw.SizedBox(
            height: 30.0
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.spaceEvenly,
          children: [
            pw.Text("2x", style: pw.TextStyle(fontSize: 16.0)),
            pw.Text("Air Feshener", style: pw.TextStyle(fontSize: 16.0)),
            pw.Text("RM 10.00", style: pw.TextStyle(fontSize: 16.0, color: PdfColors.grey)),
            pw.SizedBox(width: 40.0),
            pw.Text("RM 20.00", style: pw.TextStyle(fontSize: 16.0, fontBold: pw.Font.courierBold())),
          ]
        ),
        pw.SizedBox(
            height: 40.0
        ),
        pw.Row(
            mainAxisAlignment: pw.MainAxisAlignment.end,
            children: [
              pw.Column(
                children: [
                  pw.Text("Total: RM 20.00", style: pw.TextStyle(fontSize: 20.0, fontBold: pw.Font.courierBold())),
                  pw.SizedBox(
                      height: 15.0
                  ),
                  pw.Text("Cash: RM 20.00", style: pw.TextStyle(fontSize: 16.0)),
                ]
              ),
            ]
        ),
        pw.Header(
            level: 0,
            child: pw.Text("")
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.center,
          children: [
            pw.Text("March 30, 2020 4:41 PM", style: pw.TextStyle(fontSize: 16.0, color: PdfColors.grey)),
          ]
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.spaceAround,
          children: [
            pw.Image(sig1),
          ]
        )
      ]
    ); // Center
));

一切正常，直到最后一个小部件，即图像。它不显示在 PDF 页面中。

pubspec.yml

assets:
- images/

当我单击按钮生成 pdf 时，这就是终端中出现的内容。 不确定它是否与未渲染的图像有关。

I/flutter (13171): Helvetica has no Unicode support see https://github.com/DavBfr/dart_pdf/wiki/Fonts-Management
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
I/chatty  (13171): uid=10341(com.example.dexandrainventory) identical 2 lines
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
I/chatty  (13171): uid=10341(com.example.dexandrainventory) identical 5 lines

【参考方案1】：

如果你想显示base64图像，需要使用MemoryImage和base64Decode一起帮助你解码图像并显示在pdf中。

Printing.layoutPdf(
  onLayout: (pageFormat) async 
    final doc = pw.Document();
    var imageProvider = MemoryImage(base64Decode("your image"));
    final PdfImage image = await pdfImageFromImageProvider(
        pdf: doc.document, image: imageProvider);

    doc.addPage(pw.Page(build: (pw.Context context) 
      return pw.Center(
        child: pw.Image(image),
      );
    ));

    return doc.save();
  ,
);

【参考方案2】：

final profileImage = pw.MemoryImage(
(await rootBundle.load('assetsimage)).buffer.asUint8List(),);

最后，使用它

pw.Image(profileImage),

【参考方案3】：

在函数内部声明变量'pdf'。

像这样：

writeOnPdf() async final pdf = pw.Document(deflate: zlib.encode);