Flutter PDF查看插件chakre_pdf_viewer的使用

chakre_pdf_viewer 是一个用于处理PDF文件的Flutter插件。它支持Android和iOS平台，最初是从 pdf_viewer 叉出来的，而后者又是从 pdf_viewer 和 flutter_plugin_pdf_viewer 叉出来的。

安装

在你的 pubspec.yaml 文件中添加 chakre_pdf_viewer 作为依赖项：

dependencies:
  chakre_pdf_viewer: any

Android

无需权限。使用应用缓存目录。

iOS

无需权限。

使用方法

加载PDF

你可以从资产、URL或文件加载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('...');
PDFDocument doc = await PDFDocument.fromFile(file);

加载页面

你可以加载特定的页面：

// 加载特定页面
PDFPage pageOne = await doc.get(page: _number);

预构建的查看器

使用预构建的PDF查看器：

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

这个代码生成的视图如下所示：

显示页面选择器

你可以在对话框中显示页面选择器：

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

待办事项

• 允许密码保护的文件

第三方包

示例代码

以下是一个完整的示例代码，展示了如何使用 chakre_pdf_viewer 插件：

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

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isLoading = true;
  PDFDocument? document;
  bool _usePDFListView = false;

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

  @override
  void dispose() {
    document?.clearImageCache();
    document = null;
    super.dispose();
  }

  loadDocument() async {
    document = await PDFDocument.fromAsset('assets/sample.pdf');
    setState(() => _isLoading = false);
  }

  changePDF(int 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");
    } 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);
              },
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: const Text('FlutterPluginPDFViewer'),
        actions: <Widget>[
          GestureDetector(
            onTap: () {
              _usePDFListView = !_usePDFListView;
              setState(() {});
            },
            child: Icon(Icons.cached),
          ),
          SizedBox(width: 15),
        ],
      ),
      body: Column(
        children: <Widget>[
          !_usePDFListView
              ? Expanded(
                  child: Center(
                    child: _isLoading
                        ? Center(child: CircularProgressIndicator())
                        : PDFViewer(
                            document: document!,
                            zoomSteps: 1,
                            // 取消注释下面的行以预加载所有页面
                            // lazyLoad: false,
                            // 取消注释下面的行以垂直滚动
                            // scrollDirection: Axis.vertical,

                            // enableSwipeNavigation: false,
                            showPicker: true,
                            showNavigation: true,
                            // 取消注释下面的代码以替换底部导航
                            /* 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);
                                },
                              ),
                            ],
                          );
                        }, */
                          ),
                  ),
                )
              : Expanded(
                  child: _isLoading
                      ? Center(
                          child: CircularProgressIndicator(),
                        )
                      : PDFListViewer(
                          document: document!,
                          preload: true,
                        ),
                ),
        ],
      ),
    );
  }
}

希望这个示例对你有帮助！如果有任何问题或需要进一步的帮助，请随时提问。