如何在Flutter pdf: ^3.6.0包中插入jpg/png格式的资源图片
Flutter pdf包插入本地资源图片实现步骤
- 第一步:配置资源声明
首先将需要插入的jpg/png图片放入项目资源目录(例如assets/images/),在pubspec.yaml中完成资源注册:
flutter: assets: - assets/images/your_image.png
- 第二步:修改PDF生成逻辑加载并插入图片
先通过rootBundle加载资源的二进制数据,再转换为pdf包可识别的图片组件,插入到页面组件列表中即可。建议给pdf包引入设置别名,避免和Flutter自带的Image等组件重名冲突:
import 'package:flutter/services.dart'; // 给pdf包设置别名pw,避免和Flutter自带组件重名 import 'package:pdf/widgets.dart' as pw; import 'package:pdf/pdf.dart'; static Future<File> generate(Invoice invoice) async { final pdf = pw.Document(); // 加载本地资源图片的二进制数据 final imageBytes = await rootBundle.load('assets/images/your_image.png'); final pdfImage = pw.MemoryImage(imageBytes.buffer.asUint8List()); pdf.addPage(pw.MultiPage( build: (context) => [ // 按需插入图片,可自定义宽高、对齐、边距等属性 pw.Align( alignment: pw.Alignment.centerLeft, child: pw.Image(pdfImage, width: 100, height: 50), ), buildHeader(invoice), dashLine(), pw.SizedBox(height: 20.0), buildTitle(invoice), buildInvoice(invoice), dashLine(), priceDetails(invoice.total), ], )); return PdfApi.saveDocument( name: '${DateTime.now().day}_${DateTime.now().month}_${DateTime.now().year}.pdf', pdf: pdf); }
- 补充注意事项
- PDF页面内的所有组件都要使用
pw别名下的组件,不要混用Flutter自带的Widget,否则会出现类型不兼容报错 - jpg、png格式可直接插入,无需额外转码
- 如果要插入网络图片,可先通过网络请求下载图片的二进制数据,再用
pw.MemoryImage解析后插入即可
内容的提问来源于stack exchange,提问作者Dren
相关产品推荐
相关产品推荐

