Flutter PDF文档查看插件flutter_pdfjs_viewer的使用

Features

• 仅支持Android和iOS
  基于封装在pdf.js中的PDF文件浏览器，此插件可以帮助您查找正在使用的PDF无法显示相关信息（如签名）的原因。

Getting Started

添加依赖

首先，在pubspec.yaml文件中添加flutter_pdfjs_viewer作为依赖项：

dependencies:
  flutter_pdfjs_viewer: ^latest_version # 替换为最新版本号

然后执行flutter pub get以安装依赖。

导入包

在您的Dart代码中导入flutter_pdfjs_viewer：

import 'package:flutter_pdfjs_viewer/flutter_pdfjs_viewer.dart';

iOS配置ATS for info.plist文件

为了确保iOS设备可以加载PDF文件，请在项目的ios/Runner/Info.plist文件中添加以下内容：

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

Android配置

为了确保Android设备可以访问网络并加载PDF文件，请确保在android/app/src/main/AndroidManifest.xml文件中包含以下权限声明：

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

并且设置允许明文传输或自定义网络安全配置：

允许明文传输

<application
    android:usesCleartextTraffic="true"
    ...>
</application>

自定义网络安全配置

创建一个名为network_security_config.xml的文件，并将其放置在res/xml目录下。然后在AndroidManifest.xml中引用它：

<application
    android:networkSecurityConfig="@xml/network_security_config"
    ...>
</application>

Usage

下面是一些简单的使用示例，展示了如何通过不同方式加载PDF文件。

示例：从网络加载PDF

这是一个完整的例子，演示了如何从网络加载PDF并在Flutter应用中显示它。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // This line removes the debug banner
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const PdfViewerPage(),
    );
  }
}

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

  @override
  State<PdfViewerPage> createState() => _PdfViewerPageState();
}

class _PdfViewerPageState extends State<PdfViewerPage> {
  final String pdfUrl = "https://www.example.com/sample.pdf"; // 替换为实际的PDF链接

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PDF Detail'),),
      body: PDFJSViewerWidget.network(pdfUrl), // 使用网络URL加载PDF
    );
  }
}

更多加载方式

除了从网络加载PDF之外，还可以通过其他方式加载PDF文件：

• PDFJSViewerWidget.file(path) - 从本地文件系统加载PDF。
• PDFJSViewerWidget.assets(path) - 从Flutter assets加载PDF。
• PDFJSViewerWidget.data(data) - 直接使用二进制数据加载PDF。

请根据具体需求选择合适的方法。

Demo

以上就是关于flutter_pdfjs_viewer插件的基本介绍和使用方法，希望对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。