Flutter PDF阅读插件readpdf的使用

Flutter PDF阅读插件readpdf的使用

readpdf 是一个用于在 Flutter 应用中读取 PDF 文件的插件。以下是该插件的一些主要功能:

  • 加载 PDF 文件。
  • 滚动处理。
  • 文档来源。
  • 页面适配策略(宽度、高度、两者)。
  • 位图质量,双击缩放。

获取开始

readpdf 插件是从 Android 端移植到 Flutter 的,用于读取 PDF 文件。原始实现可以在以下链接找到: https://github.com/barteksc/AndroidPdfViewer

要初始化插件,请执行以下操作:

final _readpdfPlugin = Readpdf();

查看 PDF 文件

你可以通过调用 viewPdf 方法来查看 PDF 文件。示例如下:

String title = "";
String grade = "";
String lang = "en";

_readpdfPlugin.viewPdf('path/Beginning Flutter.pdf', title, grade, lang);

完整示例代码

下面是一个完整的示例代码,展示了如何在 Flutter 应用中使用 readpdf 插件来查看 PDF 文件。

import 'dart:io';

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

import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:readpdf/readpdf.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  final _readpdfPlugin = Readpdf();

  Future<String> getAppDirectory() async {
    Directory appDocDir = await getApplicationDocumentsDirectory();
    return appDocDir.path;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: MaterialButton(
            onPressed: () {
              _resultReadPdf();
            },
            color: Colors.green,
            child: const Text("View PDF"),
          ),
        ),
      ),
    );
  }

  _resultReadPdf() async {
    String path = await getAppDirectory();
    debugPrint("value: $path/Beginning Flutter.pdf");

    String result;
    try {
      // 调用 viewPdf 方法查看 PDF 文件
      result = await _readpdfPlugin.viewPdf(
        '$path/Beginning Flutter.pdf',
        'Beginning Flutter',
        'Grade 9',
        'en',
        4,
      );
    } on PlatformException {
      result = 'Failed to get information.';
    }

    debugPrint("Result : $result");
  }
}

代码说明

  1. 导入必要的库

    • flutter/material.dart:用于创建 Flutter 应用的基本组件。
    • dart:async:用于异步编程。
    • flutter/services.dart:用于平台相关的服务。
    • path_provider/path_provider.dart:用于获取应用的文件目录。
    • readpdf/readpdf.dart:用于读取 PDF 文件的插件。
  2. 初始化插件

    final _readpdfPlugin = Readpdf();
    
  3. 获取应用目录路径

    Future<String> getAppDirectory() async {
      Directory appDocDir = await getApplicationDocumentsDirectory();
      return appDocDir.path;
    }
    
  4. 创建按钮并绑定点击事件

    child: MaterialButton(
      onPressed: () {
        _resultReadPdf();
      },
      color: Colors.green,
      child: const Text("View PDF"),
    ),
    
  5. 查看 PDF 文件的方法

    _resultReadPdf() async {
      String path = await getAppDirectory();
      debugPrint("value: $path/Beginning Flutter.pdf");
    
      String result;
      try {
        // 调用 viewPdf 方法查看 PDF 文件
        result = await _readpdfPlugin.viewPdf(
          '$path/Beginning Flutter.pdf',
          'Beginning Flutter',
          'Grade 9',
          'en',
          4,
        );
      } on PlatformException {
        result = 'Failed to get information.';
      }
    
      debugPrint("Result : $result");
    }
    

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

1 回复

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


在 Flutter 中使用 readpdf 插件来读取和显示 PDF 文件是一个常见的需求。以下是如何使用 flutter_pdfview 插件(它是一个常用的 PDF 阅读插件)来加载和显示 PDF 文件的步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_pdfview: ^1.2.1

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

2. 导入插件

在你的 Dart 文件中导入 flutter_pdfview 插件:

import 'package:flutter_pdfview/flutter_pdfview.dart';

3. 使用 PDFView 显示 PDF

你可以使用 PDFView 小部件来加载和显示 PDF 文件。以下是一个简单的示例:

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

class PDFScreen extends StatefulWidget {
  final String path;

  PDFScreen({required this.path});

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

class _PDFScreenState extends State<PDFScreen> {
  late PDFViewController _pdfViewController;
  int pages = 0;
  int currentPage = 0;
  bool isReady = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PDF Viewer"),
      ),
      body: Stack(
        children: <Widget>[
          PDFView(
            filePath: widget.path,
            autoSpacing: false,
            enableSwipe: true,
            pageSnap: true,
            swipeHorizontal: true,
            nightMode: false,
            onError: (error) {
              print(error.toString());
            },
            onPageChanged: (int page, int total) {
              print('page change: $page/$total');
              setState(() {
                currentPage = page;
              });
            },
            onViewCreated: (PDFViewController pdfViewController) {
              _pdfViewController = pdfViewController;
            },
            onRender: (_pages) {
              setState(() {
                pages = _pages!;
                isReady = true;
              });
            },
          ),
          if (!isReady)
            Center(
              child: CircularProgressIndicator(),
            )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_forward),
        onPressed: () {
          if (currentPage < pages - 1) {
            _pdfViewController.setPage(currentPage + 1);
          }
        },
      ),
    );
  }
}

4. 导航到 PDFScreen

你可以在需要的地方导航到 PDFScreen 并传递 PDF 文件的路径:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PDFScreen(path: 'path_to_your_pdf_file.pdf'),
  ),
);
回到顶部