Flutter PDF阅读插件flutter_plugin_pdf_viewer的使用

Flutter PDF阅读插件flutter_plugin_pdf_viewer的使用

简介

flutter_plugin_pdf_viewer 是一个用于处理 PDF 文件的 Flutter 插件。它可以在 Android 和 iOS 上运行。


安装

pubspec.yaml 文件中添加以下依赖:

dependencies:
  flutter_plugin_pdf_viewer: any

然后运行 flutter pub get 来安装该插件。


使用方法

加载 PDF 文件

从资产文件加载

PDFDocument doc = await PDFDocument.fromAsset('assets/test.pdf');

从 URL 加载

PDFDocument doc = await PDFDocument.fromURL('http://www.africau.edu/images/default/sample.pdf');

从本地文件加载

File file = File('/path/to/your/file.pdf');
PDFDocument doc = await PDFDocument.fromFile(file);

加载指定页面

PDFPage pageOne = await doc.get(page: 1); // 加载第一页

使用预构建的 PDF 查看器

以下是一个完整的示例,展示如何使用 flutter_plugin_pdf_viewer 创建一个简单的 PDF 查看器。

示例代码

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

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

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

class _MyAppState extends State<MyApp> {
  bool _isLoading = true; // 是否正在加载 PDF
  PDFDocument document; // 存储 PDF 文档

  [@override](/user/override)
  void initState() {
    super.initState();
    loadDocument(); // 初始化时加载 PDF
  }

  // 异步加载 PDF 文件
  loadDocument() async {
    document = await PDFDocument.fromAsset('assets/sample.pdf'); // 从 assets 加载 PDF
    setState(() => _isLoading = false); // 更新 UI
  }

  // 更改 PDF 文件来源
  changePDF(value) async {
    setState(() => _isLoading = true); // 开始加载新文件
    if (value == 1) {
      document = await PDFDocument.fromAsset('assets/sample2.pdf'); // 从 assets 加载第二个文件
    } else if (value == 2) {
      document = await PDFDocument.fromURL(
          "http://conorlastowka.com/book/CitationNeededBook-Sample.pdf"); // 从 URL 加载文件
    } else {
      document = await PDFDocument.fromAsset('assets/sample.pdf'); // 恢复默认文件
    }
    setState(() => _isLoading = false); // 更新 UI
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        drawer: Drawer(
          child: Column(
            children: <Widget>[
              SizedBox(height: 36), // 添加间距
              ListTile(
                title: Text('Load from Assets'), // 从 assets 加载
                onTap: () {
                  changePDF(1); // 调用函数切换到 assets 文件
                },
              ),
              ListTile(
                title: Text('Load from URL'), // 从 URL 加载
                onTap: () {
                  changePDF(2); // 调用函数切换到 URL 文件
                },
              ),
              ListTile(
                title: Text('Restore default'), // 恢复默认文件
                onTap: () {
                  changePDF(3); // 调用函数恢复默认文件
                },
              ),
            ],
          ),
        ),
        appBar: AppBar(
          title: const Text('FlutterPluginPDFViewer'), // 设置标题
        ),
        body: Center(
          child: _isLoading
              ? Center(child: CircularProgressIndicator()) // 显示加载动画
              : PDFViewer(document: document), // 显示 PDF 查看器
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_plugin_pdf_viewer 是一个用于在 Flutter 应用中显示 PDF 文件的插件。它可以帮助你在应用中轻松地加载和显示 PDF 文件。以下是如何使用 flutter_plugin_pdf_viewer 的基本步骤:

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_plugin_pdf_viewer: ^1.0.0+17

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

2. 导入包

在需要使用 PDF 查看器的 Dart 文件中导入 flutter_plugin_pdf_viewer 包:

import 'package:flutter_plugin_pdf_viewer/flutter_plugin_pdf_viewer.dart';

3. 加载和显示 PDF

你可以使用 PDFDocument 类来加载 PDF 文件,并使用 PDFViewer 来显示它。

以下是一个简单的示例,展示如何加载并显示一个 PDF 文件:

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

class PDFViewerPage extends StatefulWidget {
  @override
  _PDFViewerPageState createState() => _PDFViewerPageState();
}

class _PDFViewerPageState extends State<PDFViewerPage> {
  PDFDocument? _pdfDocument;
  bool _isLoading = false;

  Future<void> _loadPDF() async {
    setState(() {
      _isLoading = true;
    });

    // Load the PDF document from an asset or a URL
    _pdfDocument = await PDFDocument.fromAsset('assets/sample.pdf');
    // _pdfDocument = await PDFDocument.fromURL('http://example.com/sample.pdf');

    setState(() {
      _isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    _loadPDF();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : PDFViewer(document: _pdfDocument!),
    );
  }
}

4. 运行应用

将上述代码添加到你的 Flutter 项目中,并确保你将 sample.pdf 文件放在 assets 文件夹中,然后在 pubspec.yaml 文件中声明它:

flutter:
  assets:
    - assets/sample.pdf
回到顶部