You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 01:27:05