Flutter PDF阅读与处理插件pspdfkit_flutter的使用

Flutter PDF阅读与处理插件pspdfkit_flutter的使用

简介

Nutrient Flutter SDK 提供了查看、注释和编辑PDF的功能。它使开发者能够快速地为任何Flutter应用程序添加PDF功能。该插件可以在 pub.dev 和 GitHub 上获取。

如果您是Flutter的新手，建议您查阅以下博客文章：

更多快速入门指南，请访问Nutrient官网。

平台特定的README文件可以在Android 和 iOS上找到。

设置

新建Flutter App集成

安装pspdfkit_flutter插件

  1. 打开pubspec.yaml:

    open pubspec.yaml

  2. 在pubspec.yaml中添加PSPDFKit依赖项：

    dependencies:
  flutter:
    sdk: flutter
+ pspdfkit_flutter: any

  3. 打开lib/main.dart并将整个内容替换为demo_project_main.dart.txt的内容。这个简单的示例将从本地设备文件系统加载PDF文档。

  4. 将要显示的PDF文档添加到项目的assets目录中：

    • 创建一个名为PDFs的目录：
      mkdir PDFs
    • 将一个sample document移动到新创建的PDFs目录，并重命名为Document.pdf：
      cp ~/Downloads/PSPDFKit.pdf PDFs/Document.pdf

  5. 在pubspec.yaml中指定assets目录：

    # The following section is specific to Flutter.
flutter:
+ assets:
+   - PDFs/
...

  6. 从终端运行以下命令以获取所有包：

    flutter pub get

Android配置

需求

  • 最新的稳定版Flutter
  • 最新的稳定版Android Studio
  • Android NDK
  • Android虚拟设备或硬件设备

开始

  1. 使用flutter CLI创建一个名为pspdfkit_demo的Flutter项目：

    flutter create --org com.example.pspdfkit_demo pspdfkit_demo

  2. 更改当前工作目录到项目路径：

    cd pspdfkit_demo

  3. 更新android/settings.gradle文件中的pluginManagement块：

    pluginManagement {
    ...
+   buildscript {
+       repositories {
+           mavenCentral()
+           maven {
+               url = uri("https://storage.googleapis.com/r8-releases/raw")
+           }
+       }
+       dependencies {
+           classpath("com.android.tools:r8:8.3.37")
+      }
+   }

// 升级Kotlin版本。
plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
-   id "com.android.application" version "7.3.0" apply false
+   id "com.android.application" version "7.3.0" apply false
-   id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+   id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

  4. 打开应用的Gradle构建文件android/app/build.gradle：

    open android/app/build.gradle

  5. 修改编译SDK版本和最小SDK版本：

    android {
-   compileSdkVersion flutter.compileSdkVersion
+   compileSdkVersion 34
...
    defaultConfig {
-       minSdkVersion flutter.minSdkVersion
+       minSdkVersion 21
...
    }
    compileOptions {
-       sourceCompatibility JavaVersion.VERSION_1_8
-       targetCompatibility JavaVersion.VERSION_1_8
+       sourceCompatibility JavaVersion.VERSION_17
+       targetCompatibility JavaVersion.VERSION_17
    }

// 如果有此块，更新`jvmTarget`为17。
    kotlinOptions {
-       jvmTarget = '1.8'
+       jvmTarget = '17'
    }
...
}

  6. 添加AppCompat AndroidX库到android/app/build.gradle文件：

    dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+   implementation 'androidx.appcompat:appcompat:1.4.0'
}

  7. 打开项目的主活动类android/app/src/main/kotlin/com/example/pspdfkit_demo/MainActivity.kt：

    open android/app/src/main/kotlin/com/example/pspdfkit_demo/MainActivity.kt

  8. 将基础Activity更改为继承自FlutterAppCompatActivity：

    - import io.flutter.embedding.android.FlutterActivity;
+ import io.flutter.embedding.android.FlutterAppCompatActivity;

- public class MainActivity extends FlutterActivity {
+ public class MainActivity extends FlutterAppCompatActivity {
}

    或者可以更新AndroidManifest.xml文件以使用FlutterAppCompatActivity作为启动器活动：

    <activity
-   android:name=".MainActivity"
+   android:name="io.flutter.embedding.android.FlutterAppCompatActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize"
    android:exported="true">

    注意：FlutterAppCompatActivity不是Flutter SDK的官方部分。它是扩展了来自AndroidX AppCompat库的AppCompatActivity的自定义Activity，用于在Flutter中使用PSPDFKit for Android。您可以在此处了解更多关于AppCompatActivity迁移的信息。

  9. 更新android/app/src/main/res/values/styles.xml中的主题以使用PSPDFKit.Theme.default作为父主题：

    - <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="NormalTheme" parent="PSPDFKit.Theme.Default">

    这是为了自定义PSPDFKit UI的主题。您可以在此处了解更多关于外观样式的信息。

  10. 启动Android模拟器或连接设备。

  11. 运行应用：

    flutter run

iOS配置

需求

  • 最新的稳定版Flutter
  • 最新的稳定版Xcode
  • 最新的稳定版CocoaPods

开始

  1. 使用flutter CLI创建一个名为pspdfkit_demo的Flutter项目：

    flutter create --org com.example.pspdfkit_demo pspdfkit_demo

  2. 更改当前工作目录到项目路径：

    cd pspdfkit_demo

  3. 打开Runner.xcworkspace：

    open ios/Runner.xcworkspace

  4. 确保iOS Deployment Target设置为15.0或更高。

  5. 将“View controller-based status bar appearance”设置为YES。

  6. 打开项目的Podfile：

    open ios/Podfile

  7. 更新平台为iOS 15并添加PSPDFKit Podspec：

    -# platform :ios, '9.0'
+ platform :ios, '15.0'
...
target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+ pod 'PSPDFKit', podspec:'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
end

  8. 启动iOS模拟器：

    flutter emulators --launch apple_ios_simulator

  9. 运行应用：

    flutter run

Web配置

需求

  • 最新的稳定版Chrome

开始

  1. 下载框架。下载完成后，解压存档并将dist文件夹的全部内容复制到项目的web/assets文件夹或Web子文件夹内的其他文件夹。

  2. 确保assets文件夹包含pspdfkit.js文件和pspdfkit-lib目录。

  3. 确保服务器设置了Content-Type: application/wasm MIME类型。

  4. 在index.html文件中包含PSPDFKit库：

    <script src="assets/pspdfkit.js"></script>

  5. 运行应用：

    flutter run

示例应用

要查看PSPDFKit for Flutter的实际效果，请参考我们的Flutter示例应用。

在Flutter应用中显示PDF文档非常简单：

PspdfkitWidget(documentPath: 'file:///path/to/Document.pdf')

升级到完整Nutrient许可证密钥

Nutrient是一个商业产品，在生产环境中使用时需要购买许可证密钥。默认情况下，此库将在演示模式下初始化，在每个PDF上放置水印并限制使用时间为60分钟。

要购买生产使用的许可证，请通过contact_sales联系我们。

要使用许可证密钥初始化Nutrient，调用以下方法之一：

await Pspdfkit.initialize(
        androidLicenseKey:"YOUR_FLUTTER_ANDROID_LICENSE_KEY_GOES_HERE", 
        iosLicenseKey:"YOUR_FLUTTER_IOS_LICENSE_KEY_GOES_HERE",
        webLicenseKey: "YOUR_FLUTTER_WEB_LICENSE_KEY_GOES_HERE"
    );

从旧版本迁移

有关升级Nutrient for Flutter的信息，请参阅升级和迁移指南。

排查问题

有关常见问题排查信息，请参阅故障排除部分。

示例代码

以下是main.dart的一个示例代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pspdfkit_example/examples.dart';
import 'package:pspdfkit_flutter/pspdfkit.dart';
import 'example_list_view.dart';

const String _pspdfkitFlutterPluginTitle =
    'PSPDFKit Flutter Plugin example app';
const String _pspdfkitWidgetExamples = 'PSPDFKit Widget Examples';
const String _pspdfkitGlobalPluginExamples = 'PSPDFKit Modal View Examples';
const String _pspdfkitFor = 'PSPDFKit for';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  Pspdfkit.initialize();
  Pspdfkit.enableAnalytics(true);
  Pspdfkit.analyticsEventsListener = (eventName, attributes) {
    if (kDebugMode) {
      print('Analytics event: $eventName with attributes: $attributes');
    }
  };
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
      theme: ThemeData(
        useMaterial3: false,
        primaryColor: Colors.blue,
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white,
        ),
      ),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  String _frameworkVersion = '';

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    initPlatformState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  String frameworkVersion() {
    return '$_pspdfkitFor $_frameworkVersion\n';
  }

  void initPlatformState() async {
    String? frameworkVersion;
    try {
      frameworkVersion = await Pspdfkit.frameworkVersion;
    } on PlatformException {
      frameworkVersion = 'Failed to get platform version. ';
    }
    if (!mounted) return;

    setState(() {
      _frameworkVersion = frameworkVersion ?? '';
    });

    Pspdfkit.flutterPdfActivityOnPause =
        () => flutterPdfActivityOnPauseHandler();
    Pspdfkit.pdfViewControllerWillDismiss =
        () => pdfViewControllerWillDismissHandler();
    Pspdfkit.pdfViewControllerDidDismiss =
        () => pdfViewControllerDidDismissHandler();
    Pspdfkit.flutterPdfFragmentAdded = () => flutterPdfFragmentAdded();
    Pspdfkit.pspdfkitDocumentLoaded =
        (documentId) => pspdfkitDocumentLoaded(documentId);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text(_pspdfkitFlutterPluginTitle)),
        body: ExampleListView(frameworkVersion(), [
          Container(
              color: Colors.grey[200],
              padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
              child: Text(_pspdfkitWidgetExamples,
                  style: Theme.of(context)
                      .textTheme
                      .titleLarge
                      ?.copyWith(fontWeight: FontWeight.bold))),
          ...examples(context),

          /// Global plugin examples are not supported on web.
          if (!kIsWeb)
            Container(
                color: Colors.grey[200],
                padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
                child: Text(_pspdfkitGlobalPluginExamples,
                    style: Theme.of(context)
                        .textTheme
                        .titleLarge
                        ?.copyWith(fontWeight: FontWeight.bold))),
          if (!kIsWeb) ...globalExamples(context),
        ]));
  }

  void flutterPdfActivityOnPauseHandler() {
    if (kDebugMode) {
      print('flutterPdfActivityOnPauseHandler');
    }
  }

  void pdfViewControllerWillDismissHandler() {
    if (kDebugMode) {
      print('pdfViewControllerWillDismissHandler');
    }
  }

  void pdfViewControllerDidDismissHandler() {
    if (kDebugMode) {
      print('pdfViewControllerDidDismissHandler');
    }
  }

  void flutterPdfFragmentAdded() {
    if (kDebugMode) {
      print('flutterPdfFragmentAdded');
    }
  }

  void pspdfkitDocumentLoaded(String? documentId) {
    if (kDebugMode) {
      print('pspdfkitDocumentLoaded: $documentId');
    }
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用pspdfkit_flutter插件来阅读和处理PDF文件的示例代码。这个插件提供了丰富的功能，允许你嵌入PDF阅读器并处理PDF文档。

首先，你需要在pubspec.yaml文件中添加pspdfkit_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  pspdfkit_flutter: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter项目中，你可以使用以下代码来集成pspdfkit_flutter。

主应用入口（main.dart）

import 'package:flutter/material.dart';
import 'package:pspdfkit_flutter/pspdfkit_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PSPDFKit Flutter Example'),
        ),
        body: Center(
          child: PDFViewerScreen(),
        ),
      ),
    );
  }
}

class PDFViewerScreen extends StatefulWidget {
  @override
  _PDFViewerScreenState createState() => _PDFViewerScreenState();
}

class _PDFViewerScreenState extends State<PDFViewerScreen> {
  @override
  Widget build(BuildContext context) {
    return PSPDFKit(
      documentPath: "path/to/your/document.pdf",  // 替换为你的PDF文件路径或URL
      configuration: PSPDFKitConfiguration(
        // 你可以在这里配置PSPDFKit的各种选项
        // 例如，启用或禁用特定的功能
        // licenseKey: "your-license-key", // 请确保你有一个有效的许可证密钥
      ),
      onDocumentLoaded: () {
        print("PDF文档已加载");
      },
      onError: (error) {
        print("加载PDF文档时出错: $error");
      },
    );
  }
}

配置PSPDFKit许可证密钥（可选）

如果你使用的是商业版本的PSPDFKit，你需要在PSPDFKitConfiguration中提供你的许可证密钥。

PSPDFKitConfiguration(
  licenseKey: "your-license-key",  // 请确保替换为你的实际许可证密钥
  // 其他配置选项...
)

处理PDF文档加载和错误

在上面的代码中，onDocumentLoaded和onError回调函数分别用于处理PDF文档加载成功和加载失败的情况。

注意事项

  1. 许可证：确保你有有效的PSPDFKit许可证密钥，否则某些功能可能无法正常工作。
  2. 文件路径：documentPath可以是本地文件路径或远程URL。如果使用的是本地文件，请确保文件路径正确，并且文件对应用有读取权限。
  3. 依赖项：pspdfkit_flutter插件可能还有其他依赖项，如原生平台的库文件，请按照官方文档进行配置。

这是一个基本的示例，展示了如何在Flutter中使用pspdfkit_flutter插件来加载和显示PDF文档。根据需求，你可以进一步自定义和扩展功能。详细信息和更多高级用法请参考PSPDFKit Flutter官方文档。

回到顶部