Flutter中实现Base64转PDF并在模态窗口打开（无需保存文件）的技术求助

我之前刚好做过类似的需求，给你分享一下可行的解决方案，帮你快速实现Base64转PDF并在模态窗口展示的功能：

首先得先指出你现有代码里的小问题：你的copyWithSelected方法方向偏了——PdfImage是用来往PDF文档里插入图片的工具类，不是用来展示完整PDF的，而且里面的变量名pdfgarranty应该是pdfBase才对，得先修正这个思路。

下面是具体的实现步骤：

1. 选择合适的PDF展示依赖 #

我们可以用flutter_pdfview这个包，它支持直接从内存中的Uint8List加载PDF，完美符合你无需保存本地的需求。先把依赖加到pubspec.yaml里：

dependencies:
  flutter_pdfview: ^1.2.4 # 建议用最新版本，可查pub.dev获取最新号

2. 修正你的WarrantyPdfEntity实体类 #

去掉原来的copyWithSelected方法，新增一个获取PDF字节数据的方法，同时处理可能带前缀的Base64字符串（很多接口返回的Base64会带data:application/pdf;base64,前缀，必须去掉才能正常解码）：

import 'dart:convert';
import 'dart:typed_data';
import 'package:freezed_annotation/freezed_annotation.dart';
part 'warranty_pdf_entity.freezed.dart';

@freezed
class WarrantyPdfEntity with _$WarrantyPdfEntity {
  const WarrantyPdfEntity._();
  const factory WarrantyPdfEntity({
    @Default('') String? pdfBase,
    final dynamic filePdf,
  }) = _WarrantyPdfEntity;

  // 核心方法：把Base64转成PDFView能直接用的Uint8List
  Uint8List? get pdfBytes {
    if (pdfBase == null || pdfBase!.isEmpty) return null;
    // 移除可能存在的MIME前缀
    final cleanBase64 = pdfBase!.replaceFirst(RegExp(r'data:application/pdf;base64,'), '');
    return base64.decode(cleanBase64);
  }
}

3. 实现模态窗口展示PDF的Widget #

用AlertDialog做容器，嵌套PDFView来展示内存中的PDF：

import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:your_project_path/warranty_pdf_entity.dart'; // 替换成你的实体类路径

class PdfPreviewDialog extends StatelessWidget {
  final WarrantyPdfEntity pdfEntity;

  const PdfPreviewDialog({super.key, required this.pdfEntity});

  @override
  Widget build(BuildContext context) {
    final pdfBytes = pdfEntity.pdfBytes;
    // 处理无效的Base64数据
    if (pdfBytes == null) {
      return AlertDialog(
        title: const Text('加载失败'),
        content: const Text('无效的PDF Base64数据'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('确定'),
          ),
        ],
      );
    }

    return AlertDialog(
      title: const Text('保修PDF预览'),
      // 给PDF设置合适的尺寸，占屏幕80%高度
      content: SizedBox(
        width: double.maxFinite,
        height: MediaQuery.of(context).size.height * 0.8,
        child: PDFView(
          pdfData: pdfBytes,
          autoSpacing: true,
          pageFling: true, // 支持滑动翻页
          pageSnap: true, // 翻页自动对齐
          onError: (error) => print('PDF加载错误: $error'),
          onPageChanged: (page, total) => print('当前页: $page / 总页数: $total'),
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('关闭'),
        ),
      ],
    );
  }
}

4. 调用模态窗口的示例 #

在你的业务代码里，只要拿到WarrantyPdfEntity实例，就能通过按钮点击打开预览窗口：

// 假设你已经获取到了WarrantyPdfEntity实例
final warrantyPdf = WarrantyPdfEntity(pdfBase: '你的Base64字符串');

// 在按钮点击事件中触发模态窗口
ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) => PdfPreviewDialog(pdfEntity: warrantyPdf),
    );
  },
  child: const Text('查看保修PDF'),
)

额外注意事项 #

• 确保你的Base64字符串是完整有效的PDF数据，如果解码失败，先检查是否有多余的前缀或格式错误。
• 如果PDF文件较大，建议在PDFView外面套个加载状态提示（比如CircularProgressIndicator），提升用户体验。
• 如果需要更高级的PDF操作（比如选中文本、添加标注），可以替换成pdf_render包，功能更丰富但用法稍复杂。

内容的提问来源于stack exchange，提问作者Andrii Havryliak