Flutter PDF阅读插件easy_pdf_viewer的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter PDF阅读插件easy_pdf_viewer的使用

easy_pdf_viewer简介

easy_pdf_viewer是一个用于处理PDF文件的Flutter插件,适用于Android和iOS平台。该插件最初是基于https://github.com/lohanidamodar/pdf_viewer进行改进的。

Pub Package

安装

在您的项目中安装easy_pdf_viewer插件非常简单:

> flutter pub add easy_pdf_viewer

Android

无需特殊权限,插件会使用应用程序缓存目录。

iOS

同样不需要额外的权限。

使用方法

加载PDF

您可以从资源、URL或文件加载PDF文档。

从资源加载

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

从URL加载

PDFDocument doc = await PDFDocument.fromURL('https://www.ecma-international.org/wp-content/uploads/ECMA-262_12th_edition_june_2021.pdf');

从文件加载

File file = File('...');
PDFDocument doc = await PDFDocument.fromFile(file);

加载指定页面

如果您需要加载特定页数的PDF页面,可以这样做:

PDFPage pageOne = await doc.get(page: _number);

使用预构建的PDF查看器

为了方便起见,插件提供了一个预构建的PDF查看器组件,可以直接使用。

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

示例代码

下面是一个完整的示例,展示了如何在Flutter应用中使用easy_pdf_viewer插件来加载并显示PDF文档。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyApp(),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({this.progressExample = false});

  final bool progressExample;

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

class _MyAppState extends State<MyApp> {
  bool _isLoading = true;
  late PDFDocument document;

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

  loadDocument() async {
    document = await PDFDocument.fromAsset('assets/sample.pdf');

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

  changePDF(value) async {
    setState(() => _isLoading = true);
    if (value == 1) {
      document = await PDFDocument.fromAsset('assets/sample2.pdf');
    } else if (value == 2) {
      document = await PDFDocument.fromURL(
        "https://www.africau.edu/images/default/sample.pdf",
        /* cacheManager: CacheManager(
          Config(
            "customCacheKey",
            stalePeriod: const Duration(days: 2),
            maxNrOfCacheObjects: 10,
          ),
        ), */
      );
    } else {
      document = await PDFDocument.fromAsset('assets/sample.pdf');
    }
    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            SizedBox(height: 36),
            ListTile(
              title: Text('Load from Assets'),
              onTap: () {
                changePDF(1);
              },
            ),
            ListTile(
              title: Text('Load from URL'),
              onTap: () {
                changePDF(2);
              },
            ),
            ListTile(
              title: Text('Restore default'),
              onTap: () {
                changePDF(3);
              },
            ),
            ListTile(
              title: Text('With Progress'),
              onTap: () {
                // Navigate to another page with progress bar
              },
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: const Text('PDFViewer'),
      ),
      body: Center(
        child: _isLoading
            ? Center(child: CircularProgressIndicator())
            : PDFViewer(
                document: document,
                lazyLoad: false,
                zoomSteps: 1,
                numberPickerConfirmWidget: const Text(
                  "Confirm",
                ),
                //uncomment below line to preload all pages
                // lazyLoad: false,
                // uncomment below line to scroll vertically
                // scrollDirection: Axis.vertical,

                //uncomment below code to replace bottom navigation with your own
                /* navigationBuilder:
                      (context, page, totalPages, jumpToPage, animateToPage) {
                    return ButtonBar(
                      alignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Icons.first_page),
                          onPressed: () {
                            jumpToPage()(page: 0);
                          },
                        ),
                        IconButton(
                          icon: Icon(Icons.arrow_back),
                          onPressed: () {
                            animateToPage(page: page - 2);
                          },
                        ),
                        IconButton(
                          icon: Icon(Icons.arrow_forward),
                          onPressed: () {
                            animateToPage(page: page);
                          },
                        ),
                        IconButton(
                          icon: Icon(Icons.last_page),
                          onPressed: () {
                            jumpToPage(page: totalPages - 1);
                          },
                        ),
                      ],
                    );
                  }, */
              ),
      ),
    );
  }
}

通过以上内容,您应该能够快速上手并使用easy_pdf_viewer插件在Flutter应用程序中实现PDF文档的加载与查看功能。如果有任何问题或进一步的需求,请随时查阅官方文档或寻求社区的帮助。


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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用easy_pdf_viewer插件来查看PDF文件的示例代码。

1. 添加依赖

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

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

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

2. 导入插件

在你的Dart文件中导入easy_pdf_viewer

import 'package:easy_pdf_viewer/easy_pdf_viewer.dart';

3. 使用PDFViewer

下面是一个完整的示例,展示如何在Flutter应用中显示PDF文件:

import 'package:flutter/material.dart';
import 'package:easy_pdf_viewer/easy_pdf_viewer.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter PDF Viewer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PDFViewerScreen(),
    );
  }
}

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

class _PDFViewerScreenState extends State<PDFViewerScreen> {
  late String pdfPath;

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

  Future<void> _loadPdfFromAssets() async {
    // 从assets文件夹中加载PDF文件(假设你的PDF文件名为sample.pdf)
    // 注意:需要在pubspec.yaml中声明assets
    // flutter:
    //   assets:
    //     - assets/sample.pdf

    final ByteData data = await rootBundle.load('assets/sample.pdf');
    final Directory tempDir = await getTemporaryDirectory();
    final File tempFile = File('${tempDir.path}/sample.pdf');
    await tempFile.writeAsBytes(data.buffer.asUint8List());

    setState(() {
      pdfPath = tempFile.path;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer Demo'),
      ),
      body: pdfPath.isEmpty
          ? Center(child: CircularProgressIndicator())
          : PDFViewerScaffold(
              appBar: AppBar(
                title: Text('Sample PDF'),
              ),
              path: pdfPath,
            ),
    );
  }
}

4. 在pubspec.yaml中声明assets

确保在pubspec.yaml中声明你要加载的PDF文件:

flutter:
  assets:
    - assets/sample.pdf

5. 运行应用

现在你可以运行你的Flutter应用,应该会看到一个简单的PDF阅读器界面,其中显示了你从assets文件夹中加载的PDF文件。

这个示例展示了如何从应用的assets中加载PDF文件并在easy_pdf_viewer中显示它。根据你的需求,你也可以从网络或本地存储加载PDF文件。easy_pdf_viewer插件提供了灵活的方式来显示PDF文件,你可以查阅其官方文档以了解更多高级用法。

回到顶部