Flutter PDF阅读插件compdfkit_flutter的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter PDF阅读插件compdfkit_flutter的使用

概述

ComPDFKit Flutter PDF Library 是一个强大的PDF库，提供了快速查看、注释、编辑和签署PDF文件的全面功能。它功能丰富且经过实战测试，使PDF文件处理和操作更加简单快捷。

ComPDFKit for Flutter允许您快速将PDF功能添加到任何Flutter应用程序中，提升您的Android和iOS应用程序，确保无缝和高效的开发。它可在 pub.dev 和 GitHub 获取。

关键特性

  • Viewer：提供标准页面显示模式、导航、文本搜索与选择、缩放和平移、文本重排等功能。
  • Annotations：提供笔记、链接、自由文本、线条、矩形、圆形、高亮、下划线、波浪线、删除线、图章、墨水、声音等注释类型。
  • Forms：提供按钮、复选框、单选按钮、文本框、组合框、列表框、签名等表单元素。
  • Document Editor：提供拆分、提取、合并、删除、插入、裁剪、移动、旋转、替换和交换页面等功能。
  • Content Editor：提供复制、调整大小、更改颜色、文本对齐、查找和替换等功能。
  • Security：提供加密和解密PDF文件、水印等功能。

快速开始

环境要求

Android

  • 最新稳定版本的Flutter
  • 最新稳定版本的Android Studio
  • Android NDK
  • Android虚拟设备（AVD）
  • 操作环境要求：
    • minSdkVersion 21或更高
    • compileSdkVersion 34或更高
    • targetSdkVersion 34或更高
    • 支持的ABI：x86, x86_64, armeabi-v7a, arm64-v8a

iOS

  • 最新稳定版本的Flutter
  • 最新稳定版本的Xcode
  • 最新稳定版本的CocoaPods
  • 操作环境要求：
    • iOS 12.0或更高
    • Xcode 12.0或更新版本

集成到新的Flutter应用

Android

  1. 创建一个名为example的Flutter项目：

    flutter create --org com.compdfkit.flutter example

  2. 进入项目目录：

    cd example

  3. 修改AndroidManifest.xml，添加网络和存储权限：

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.compdfkit.flutter.example">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>

    <application
        android:requestLegacyExternalStorage="true">

    </application>   
</manifest>

  4. 修改build.gradle，设置最小SDK版本为21：

    android {
    defaultConfig {
        minSdkVersion 21
        ...
    }
}

  5. 修改MainActivity.java，继承FlutterFragmentActivity：

    import io.flutter.embedding.android.FlutterFragmentActivity;

public class MainActivity extends FlutterFragmentActivity {
}

  6. 添加ComPDFKit依赖到pubspec.yaml：

    dependencies:
  flutter:
    sdk: flutter
  compdfkit_flutter: ^2.2.1

  7. 创建并添加PDF文件到pdfs目录，并在pubspec.yaml中指定资源路径：

    flutter:
  assets:
    - pdfs/

  8. 获取所有依赖包：

    flutter pub get

iOS

  1. 创建一个名为example的Flutter项目：

    flutter create --org com.compdfkit.flutter example

  2. 进入项目目录：

    cd example

  3. 添加ComPDFKit依赖到pubspec.yaml：

    dependencies:
  flutter:
    sdk: flutter
  compdfkit_flutter: ^2.2.1

  4. 修改Podfile，更新平台为iOS 12并添加ComPDFKit Podspec：

    platform :ios, '12.0'

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  pod 'ComPDFKit_Tools', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit_tools/2.2.1.podspec'
  pod 'ComPDFKit', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit/2.2.1.podspec'
end

  5. 安装Pods：

    pod install

  6. 创建并添加PDF文件到pdfs目录，并在pubspec.yaml中指定资源路径：

    flutter:
  assets:
    - pdfs/

  7. 获取所有依赖包：

    flutter pub get

  8. 在Info.plist中配置隐私条款：

    <key>NSCameraUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSMicrophoneUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

应用许可证密钥

import 'package:compdfkit_flutter/compdfkit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ComPDFKit.initialize(
      androidOnlineLicense: 'your compdfkit key',
      iosOnlineLicense: 'your compdfkit key');
  runApp(MyApp());
}

使用示例

使用Plugin打开PDF文档

import 'dart:io';
import 'package:compdfkit_flutter/compdfkit.dart';
import 'package:flutter/material.dart';

const String _documentPath = 'pdfs/PDF_Document.pdf';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _init();
  }

  void _init() async {
    await ComPDFKit.initialize(
        androidOnlineLicense: 'your compdfkit key',
        iosOnlineLicense: 'your compdfkit key');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: ElevatedButton(
              onPressed: () async {
                showDocument(context);
              },
              child: const Text('Open Document'),
            ),
          ),
        ),
      ),
    );
  }

  void showDocument(BuildContext context) async {
    final bytes = await DefaultAssetBundle.of(context).load(_documentPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await ComPDFKit.getTemporaryDirectory();
    var pdfsDir = Directory('${tempDir.path}/pdfs');
    pdfsDir.createSync(recursive: true);

    final tempDocumentPath = '${tempDir.path}/$_documentPath';
    final file = File(tempDocumentPath);
    if (!file.existsSync()) {
      file.createSync(recursive: true);
      file.writeAsBytesSync(list);
    }
    var configuration = CPDFConfiguration();
    ComPDFKit.openDocument(tempDocumentPath,
        password: '', configuration: configuration);
  }
}

使用Widget打开PDF文档

import 'dart:io';
import 'package:compdfkit_flutter/compdfkit.dart';
import 'package:compdfkit_flutter/widgets/cpdf_reader_widget.dart';
import 'package:flutter/material.dart';

const String _documentPath = 'pdfs/PDF_Document.pdf';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _document;

  @override
  void initState() {
    super.initState();
    _init();
    _getDocumentPath(context).then((value) {
      setState(() {
        _document = value;
      });
    });
  }

  void _init() async {
    await ComPDFKit.initialize(
        androidOnlineLicense: 'your compdfkit key',
        iosOnlineLicense: 'your compdfkit key');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('CPDFReaderWidget Example')),
        body: _document == null
            ? Container()
            : CPDFReaderWidget(
                document: _document!,
                configuration: CPDFConfiguration(),
              ),
      ),
    );
  }

  Future<String> _getDocumentPath(BuildContext context) async {
    final bytes = await DefaultAssetBundle.of(context).load(_documentPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await ComPDFKit.getTemporaryDirectory();
    var pdfsDir = Directory('${tempDir.path}/pdfs');
    pdfsDir.createSync(recursive: true);

    final tempDocumentPath = '${tempDir.path}/$_documentPath';
    final file = File(tempDocumentPath);
    if (!file.existsSync()) {
      file.createSync(recursive: true);
      file.writeAsBytesSync(list);
    }
    return tempDocumentPath;
  }
}

UI定制

通过CPDFConfiguration类可以定义多种配置选项，以满足产品需求。例如：

  1. 设置初始显示模式和可用模式：

    var configuration = CPDFConfiguration(modeConfig: const ModeConfig(
  initialViewMode: CPreviewMode.viewer,
  availableViewModes: [
    CPreviewMode.viewer,
    CPreviewMode.annotations
  ]
));

  2. 设置启用的注释类型和默认注释属性值：

    var configuration = CPDFConfiguration(
  annotationsConfig: const CPDFAnnotationsConfig(
    availableTypes: [CPDFAnnotationType.highlight],
    initAttribute: CPDFAnnotationAttribute(
      highlight: CPDFAnnotAttr.highlight(color: Colors.blue, alpha: 255)
    )
  )
);

  3. 设置显示模式和页面翻转方向：

    var configuration = CPDFConfiguration(
  readerViewConfig: const ReaderViewConfig(
    displayMode: CPDFDisplayMode.doublePage,
    verticalMode: false
  )
);

示例应用

您可以查看我们的Flutter示例应用和API参考了解更多详细信息。

支持

如果您有任何问题或需要技术支持，请访问我们的指南页面，或联系我们的技术支援团队。

许可证

ComPDFKit PDF SDK支持灵活的许可选项，详情请联系我们的sales团队。

希望以上内容能帮助您更好地理解和使用ComPDFKit Flutter PDF Library！如果有任何问题，请随时联系我们的支持团队。


更多关于Flutter PDF阅读插件compdfkit_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter PDF阅读插件compdfkit_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用compdfkit_flutter插件来显示和阅读PDF文件的示例代码。compdfkit_flutter是一个Flutter插件，它封装了PDFKit，使得在Flutter应用中显示和交互PDF文件变得更加容易。

首先，确保你已经在pubspec.yaml文件中添加了compdfkit_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  compdfkit_flutter: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中按照以下步骤使用compdfkit_flutter来显示PDF文件。

示例代码

  1. 导入必要的包

在你的Dart文件中导入compdfkit_flutter包：

import 'package:flutter/material.dart';
import 'package:compdfkit_flutter/compdfkit_flutter.dart';
  1. 创建PDF阅读页面

创建一个新的页面来显示PDF文件：

class PDFViewerPage extends StatefulWidget {
  final String pdfPath;  // PDF文件的路径

  PDFViewerPage({required this.pdfPath});

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

class _PDFViewerPageState extends State<PDFViewerPage> {
  late PDFViewController _pdfViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: Center(
        child: PDFView(
          filePath: widget.pdfPath,
          onLoaded: (PDFViewController controller) {
            _pdfViewController = controller;
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 示例：跳转到第一页
          _pdfViewController.goToPage(1);
        },
        tooltip: 'Go to first page',
        child: Icon(Icons.first_page),
      ),
    );
  }
}
  1. 在主应用中使用PDF阅读页面

在你的主应用文件中（例如main.dart），导航到PDF阅读页面：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter PDF Viewer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter PDF Viewer Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 替换为你的PDF文件路径
            String pdfPath = 'assets/sample.pdf';  // 确保PDF文件已放置在assets文件夹中
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PDFViewerPage(pdfPath: pdfPath)),
            );
          },
          child: Text('Open PDF'),
        ),
      ),
    );
  }
}

注意事项

  1. 添加PDF文件到assets

    如果你打算从应用的assets中加载PDF文件，请确保在pubspec.yaml中声明了assets：

    flutter:
  assets:
    - assets/sample.pdf

  2. iOS和Android配置

    由于compdfkit_flutter依赖于原生代码，你可能需要在iOS和Android项目中进行一些配置。具体配置步骤可以参考compdfkit_flutter的官方文档或仓库的README文件。

  3. 处理权限

    如果你的PDF文件存储在设备的存储中，你可能需要请求存储权限。

这个示例展示了如何在Flutter应用中使用compdfkit_flutter插件来显示和阅读PDF文件。你可以根据需求进一步自定义和扩展功能。

回到顶部