Flutter PDF阅读插件flutter_full_pdf_viewer的使用

Flutter PDF阅读插件flutter_full_pdf_viewer的使用

Android 和 iOS 支持的 PDF 阅读器!

使用此软件包作为库

1. 依赖于它

在你的 pubspec.yaml 文件中添加以下内容:

dependencies:
  flutter_full_pdf_viewer: ^1.0.6
2. 安装它

你可以通过命令行安装包:

$ flutter packages get

或者,你的编辑器可能支持 pub getflutter packages get。请查阅你的编辑器文档以了解更多信息。

3. 导入它

现在你可以在 Dart 代码中使用以下导入语句:

import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_plugin.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
4. 在 Android 上发布信息

首先,你需要遵循这些步骤:部署 Android 应用

之后,你需要将 NDK 过滤器添加到你的发布配置中:

buildTypes {
    release {
        signingConfig signingConfigs.release
        minifyEnabled true
        useProguard true
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

        ndk {
            abiFilters 'armeabi-v7a'
        }
    }

    debug {
        minifyEnabled false
        useProguard false
    }
}

现在你的发布应用应该可以正常工作了。

示例代码

以下是完整的示例代码,展示了如何使用 flutter_full_pdf_viewer 插件来打开并显示 PDF 文件:

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MaterialApp(
    title: 'PDF Viewer Example',
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String pathPDF = "";

  [@override](/user/override)
  void initState() {
    super.initState();
    createFileOfPdfUrl().then((f) {
      setState(() {
        pathPDF = f.path;
        print(pathPDF);
      });
    });
  }

  Future<File> createFileOfPdfUrl() async {
    final url = "http://africau.edu/images/default/sample.pdf";
    final filename = url.substring(url.lastIndexOf("/") + 1);
    var request = await HttpClient().getUrl(Uri.parse(url));
    var response = await request.close();
    var bytes = await consolidateHttpClientResponseBytes(response);
    String dir = (await getApplicationDocumentsDirectory()).path;
    File file = new File('$dir/$filename');
    await file.writeAsBytes(bytes);
    return file;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PDF Viewer Example')),
      body: Center(
        child: RaisedButton(
          child: Text("打开 PDF"),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => PDFScreen(pathPDF)),
          ),
        ),
      ),
    );
  }
}

class PDFScreen extends StatelessWidget {
  String pathPDF = "";
  PDFScreen(this.pathPDF);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PDFViewerScaffold(
        appBar: AppBar(
          title: Text("文档"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.share),
              onPressed: () {},
            ),
          ],
        ),
        path: pathPDF);
  }
}

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

1 回复

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


flutter_full_pdf_viewer 是一个用于在 Flutter 应用中显示 PDF 文件的插件。它提供了一个全屏的 PDF 查看器,允许用户在应用中直接查看 PDF 文件。以下是使用 flutter_full_pdf_viewer 的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 flutter_full_pdf_viewer 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_full_pdf_viewer: ^1.0.17

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

2. 导入包

在你的 Dart 文件中导入 flutter_full_pdf_viewer 包:

import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';

3. 打开 PDF 文件

使用 FlutterFullPdfViewer 来打开并显示 PDF 文件。你可以通过传递 PDF 文件的路径来打开它。

class PdfViewerScreen extends StatelessWidget {
  final String pdfPath;

  PdfViewerScreen(this.pdfPath);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PDFViewerScaffold(
      path: pdfPath,
    );
  }
}

4. 导航到 PDF 查看器

你可以在应用中通过导航将用户引导到 PDF 查看器页面。例如:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PdfViewerScreen('/path/to/your/pdf/file.pdf'),
  ),
);

5. 处理 PDF 文件路径

确保你提供的 PDF 文件路径是有效的。你可以使用 path_provider 插件来获取应用的缓存目录或文档目录,并将 PDF 文件保存到这些目录中。

import 'package:path_provider/path_provider.dart';

Future<String> get _localPath async {
  final directory = await getApplicationDocumentsDirectory();
  return directory.path;
}

Future<File> get _localFile async {
  final path = await _localPath;
  return File('$path/document.pdf');
}

6. 示例代码

以下是一个完整的示例代码,展示如何使用 flutter_full_pdf_viewer 插件:

import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  Future<void> _openPDF(BuildContext context) async {
    final pdfPath = await _savePDFLocally();
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PdfViewerScreen(pdfPath),
      ),
    );
  }

  Future<String> _savePDFLocally() async {
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/example.pdf');
    await file.writeAsBytes(await _loadPDFBytes());
    return file.path;
  }

  Future<List<int>> _loadPDFBytes() async {
    // 这里可以从网络或本地加载 PDF 文件的字节数据
    // 例如:return await http.get('https://example.com/example.pdf').then((response) => response.bodyBytes);
    return [];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _openPDF(context),
          child: Text('Open PDF'),
        ),
      ),
    );
  }
}

class PdfViewerScreen extends StatelessWidget {
  final String pdfPath;

  PdfViewerScreen(this.pdfPath);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PDFViewerScaffold(
      path: pdfPath,
    );
  }
}
回到顶部