1. 插件介绍

fluttertpc_pdf_render 是一个基于 pdf_render@1.4.7 开发的 Flutter PDF 渲染插件，专门针对鸿蒙（HarmonyOS）系统进行了定制和适配。该插件提供了强大的 PDF 文档渲染能力，支持打开本地文件、资源文件和内存中的 PDF 数据，并提供了丰富的 Widget 用于在 Flutter 应用中显示和交互 PDF 内容。

主要功能特点

• 支持多种 PDF 源：本地文件、应用资源、内存数据
• 提供高级 PDF 查看器组件 PdfViewer，支持缩放、滚动等交互
• 提供低级渲染 API，可自定义 PDF 页面渲染效果
• 支持单页和多页 PDF 显示
• 完整的鸿蒙系统权限适配

2. 安装与配置

2.1 添加依赖

由于这是一个自定义修改版本的插件，需要通过 Git 形式引入。在项目的 pubspec.yaml 文件中添加以下配置：

dependencies:
  pdf_render:
    git:
      url: "https://gitcode.com/openharmony-sig/fluttertpc_pdf_render.git"

然后执行命令：

flutter pub get

2.2 鸿蒙系统权限配置

在鸿蒙系统上使用该插件需要配置网络权限。

2.2.1 添加权限声明

打开 entry/src/main/module.json5 文件，添加以下权限配置：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "reason": "$string:network_reason",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when":"inuse"
    }
  },
]

2.2.2 添加权限说明

打开 entry/src/main/resources/base/element/string.json 文件，添加权限说明：

{
  "string": [
    {
      "name": "network_reason",
      "value": "使用网络"
    },
  ]
}

3. 核心 API 使用

3.1 打开 PDF 文档

fluttertpc_pdf_render 提供了三种打开 PDF 文档的方式：

3.1.1 打开资源文件

PdfDocument doc = await PdfDocument.openAsset('assets/hello.pdf');

3.1.2 打开本地文件

PdfDocument doc = await PdfDocument.openFile('/path/to/file.pdf');

3.1.3 打开内存数据

Uint8List pdfData = /* 从网络或其他来源获取的 PDF 数据 */;
PdfDocument doc = await PdfDocument.openData(pdfData);

3.2 渲染 PDF 页面

// 获取第一页
PdfPage page = await doc.getPage(1);

// 渲染页面
PdfPageImage pageImage = await page.render();

// 生成缓存图像
await pageImage.createImageIfNotAvailable();

// 使用图像数据
ui.Image image = pageImage.imageIfAvailable!;

3.3 释放资源

PDF 文档使用完毕后，需要及时释放资源：

doc.dispose();

4. Widget 组件使用

4.1 PdfViewer - 高级 PDF 查看器

PdfViewer 是一个功能完整的 PDF 查看器组件，支持缩放、滚动等交互操作。

import 'package:pdf_render/pdf_render_widgets.dart';

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('PDF Viewer')),
      backgroundColor: Colors.grey,
      body: PdfViewer.openAsset(
        'assets/hello.pdf',
        params: PdfViewerParams(
          padding: 10,
          minScale: 1.0,
          maxScale: 5.0,
        ),
      ),
    ),
  );
}

4.2 PdfViewer 控制器

使用 PdfViewerController 可以控制 PDF 查看器的行为：

final controller = PdfViewerController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('PDF Viewer')),
    body: PdfViewer.openAsset(
      'assets/hello.pdf',
      viewerController: controller,
    ),
    floatingActionButton: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        FloatingActionButton(
          child: Icon(Icons.first_page),
          onPressed: () => controller.ready?.goToPage(pageNumber: 1),
        ),
        FloatingActionButton(
          child: Icon(Icons.last_page),
          onPressed: () => controller.ready?.goToPage(pageNumber: controller.pageCount),
        ),
      ],
    ),
  );
}

4.3 单页显示

使用 PdfDocumentLoader 和 PdfPageView 可以实现单页 PDF 显示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Single Page PDF')),
    body: Center(
      child: PdfDocumentLoader.openAsset(
        'assets/hello.pdf',
        pageNumber: 1,
        pageBuilder: (context, textureBuilder, pageSize) => textureBuilder(),
      ),
    ),
  );
}

4.4 多页列表显示

结合 ListView.builder 可以实现多页 PDF 滚动显示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Multi-page PDF')),
    body: Center(
      child: PdfDocumentLoader.openAsset(
        'assets/hello.pdf',
        documentBuilder: (context, pdfDocument, pageCount) => LayoutBuilder(
          builder: (context, constraints) => ListView.builder(
            itemCount: pageCount,
            itemBuilder: (context, index) => Container(
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.all(5),
              color: Colors.black12,
              child: PdfPageView(
                pdfDocument: pdfDocument,
                pageNumber: index + 1,
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

5. 示例代码

下面是一个完整的示例，展示了如何在鸿蒙系统上使用 fluttertpc_pdf_render 插件：

import 'package:flutter/material.dart';
import 'package:pdf_render/pdf_render_widgets.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = PdfViewerController();
  TapDownDetails? _doubleTapDetails;

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: ValueListenableBuilder<Matrix4>(
              valueListenable: controller,
              builder: (context, _, child) => Text(controller.isReady
                  ? 'Page #${controller.currentPageNumber}'
                  : 'PDF Viewer')),
        ),
        backgroundColor: Colors.grey,
        body: GestureDetector(
          // 支持双击缩放
          onDoubleTapDown: (details) => _doubleTapDetails = details,
          onDoubleTap: () => controller.ready?.setZoomRatio(
            zoomRatio: controller.zoomRatio * 1.5,
            center: _doubleTapDetails!.localPosition,
          ),
          child: PdfViewer.openAsset(
            'assets/hello.pdf',
            viewerController: controller,
            onError: (err) => print(err),
            params: const PdfViewerParams(
              padding: 10,
              minScale: 1.0,
              maxScale: 5.0,
            ),
          ),
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              child: const Icon(Icons.first_page),
              onPressed: () => controller.ready?.goToPage(pageNumber: 1),
            ),
            FloatingActionButton(
              child: const Icon(Icons.last_page),
              onPressed: () => controller.ready?.goToPage(pageNumber: controller.pageCount),
            ),
          ],
        ),
      ),
    );
  }
}

6. 注意事项

1. 兼容性：

   • Flutter 版本：3.7.12-ohos-1.0.6
   • HarmonyOS SDK：5.0.0

2. 权限配置：

   • 确保已正确配置网络权限，否则可能导致 PDF 加载失败

3. 资源管理：

   • 使用完 PdfDocument 后，请调用 dispose() 方法释放资源

4. 性能优化：

   • 对于大型 PDF 文件，建议使用分页加载或懒加载策略
   • 合理设置渲染参数，避免过度渲染影响性能

7. 总结

fluttertpc_pdf_render 是一个功能强大的 PDF 渲染插件，专为鸿蒙系统进行了定制和适配。它提供了从低级渲染 API 到高级组件的完整解决方案，满足各种 PDF 显示和交互需求。通过本文的介绍，您应该能够轻松地在鸿蒙系统上集成和使用该插件，为您的 Flutter 应用添加 PDF 查看功能。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net