如何在Flutter中用Syncfusion库在现有PDF指定位置添加图文并保存？

syncfusion_flutter_pdfviewer仅用于PDF查看，要实现添加图文并保存的功能，需要配合syncfusion_flutter_pdf库（专门处理PDF编辑），以下是具体实现步骤：

1. 添加依赖 #

在pubspec.yaml中添加PDF编辑库的依赖：

dependencies:
  syncfusion_flutter_pdf: ^25.1.35 # 替换为最新版本

2. 核心实现代码 #

2.1 加载并编辑PDF #

从内存中加载你现有PDF数据（对应代码中的widget.fileData），然后添加文本和图片：

import 'package:syncfusion_flutter_pdf/pdf.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

Future<Uint8List> modifyPdf(Uint8List originalPdfData) async {
  // 加载现有PDF文档
  PdfDocument document = PdfDocument(inputBytes: originalPdfData);
  
  // 获取要编辑的页面（示例为第一页，索引从0开始）
  PdfPage page = document.pages[0];
  PdfGraphics graphics = page.graphics;

  // 添加文本
  PdfFont font = PdfStandardFont(PdfFontFamily.helvetica, 12);
  // 在X:100、Y:200位置绘制文本（PDF坐标原点为页面左下角）
  graphics.drawString(
    "自定义添加文本",
    font,
    brush: PdfSolidBrush(PdfColor(0, 0, 0)),
    bounds: Rect.fromLTWH(100, 200, 200, 50),
  );

  // 添加图片（示例从本地asset加载）
  final ByteData imageData = await rootBundle.load('assets/demo_image.png');
  final Uint8List imageBytes = imageData.buffer.asUint8List();
  final ui.Codec codec = await ui.instantiateImageCodec(imageBytes);
  final ui.FrameInfo frameInfo = await codec.getNextFrame();
  final ui.Image image = frameInfo.image;
  
  PdfBitmap pdfImage = PdfBitmap(await image.toByteData(format: ui.ImageByteFormat.png)!.buffer.asUint8List());
  // 在X:300、Y:200位置绘制宽100、高100的图片
  graphics.drawImage(
    pdfImage,
    Rect.fromLTWH(300, 200, 100, 100),
  );

  // 保存修改后的PDF为字节数据
  Uint8List modifiedPdfBytes = await document.save();
  // 关闭文档释放资源
  document.dispose();

  return modifiedPdfBytes;
}

2.2 集成到现有查看代码中 #

调用上述方法修改PDF后，更新Viewer显示并保存到本地：

// 示例：添加按钮触发修改操作
ElevatedButton(
  onPressed: () async {
    Uint8List modifiedBytes = await modifyPdf(widget.fileData);
    // 更新PDFViewer显示修改后的内容
    setState(() {
      widget.fileData = modifiedBytes;
    });

    // 保存到本地文件（需提前申请文件读写权限）
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/modified_pdf.pdf');
    await file.writeAsBytes(modifiedBytes);
  },
  child: Text("添加图文并保存"),
)

关键注意事项 #

• PDF坐标系统：PDF的坐标原点是页面左下角，设置X、Y时需注意和视觉位置的转换。
• 资源处理：使用自定义字体需用PdfTrueTypeFont加载；图片必须转换为PdfBitmap才能绘制。
• 内存管理：操作完成后务必调用document.dispose()释放资源，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Dhananjay Gahiwade