Flutter PDF阅读插件advance_pdf_viewer2的使用

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

Flutter PDF阅读插件 advance_pdf_viewer2 的使用

advance_pdf_viewer2 是一个用于处理PDF文件的Flutter插件,支持Android和iOS平台。它最初是从 flutter_plugin_pdf_viewer 分支出来的。

更新

  • MacOS支持目前处于测试阶段。

安装

在您的 pubspec.yaml 文件中添加 advance_pdf_viewer2 依赖:

dependencies:
  advance_pdf_viewer2: any

平台配置

Android

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

iOS

同样无需额外权限。

使用方法

加载PDF文档

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

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

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

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

加载特定页面

您还可以加载特定页面:

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

预构建的PDF查看器

使用预构建的PDF查看器组件展示PDF文档:

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

此代码将生成如下视图: Demo Screenshot

示例项目

以下是一个完整的示例项目,演示了如何加载和显示PDF文档。

import 'package:flutter/material.dart';
import 'package:advance_pdf_viewer2/advance_pdf_viewer.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

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

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

  [@override](/user/override)
  void initState() {
    super.initState();
    loadDocument();
  }

  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://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf",
      );
    } else {
      document = await PDFDocument.fromAsset('assets/sample.pdf');
    }
    setState(() => _isLoading = false);
    Navigator.pop(context);
  }

  [@override](/user/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'),
      ),
      body: Center(
        child: _isLoading
            ? Center(child: CircularProgressIndicator())
            : PDFViewer(
                document: document,
                zoomSteps: 1,
              ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用advance_pdf_viewer2插件来阅读和显示PDF文件的示例代码。

首先,确保你已经在pubspec.yaml文件中添加了advance_pdf_viewer2依赖项:

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

然后,运行flutter pub get来获取依赖项。

接下来,你可以在你的Flutter项目中创建一个新的页面来显示PDF文件。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:advance_pdf_viewer2/advance_pdf_viewer2.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 StatelessWidget {
  // 你可以将PDF文件的URL或本地文件路径传递给这个变量
  final String pdfUrlOrPath = 'assets/sample.pdf';  // 如果使用本地文件,请确保在pubspec.yaml中声明

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: Center(
        child: PDFViewer(
          documentPath: pdfUrlOrPath,
          autoSpacing: true,
          pageFling: true,
          pageSnap: true,
          nightMode: false,
          autoScale: true,
          enableSwipe: true,
          swipeHorizontal: true,
          defaultPageSize: PageSize.a4,
          onError: (error) {
            print("Error loading PDF: $error");
          },
          onPageChanged: (page, pageCount) {
            print("Page changed: $page/$pageCount");
          },
          onLoad: (pageCount) {
            print("PDF loaded with $pageCount pages.");
          },
        ),
      ),
    );
  }
}

注意

  1. 本地文件:如果你使用本地文件,请确保在pubspec.yaml文件的assets部分声明PDF文件。例如:
flutter:
  assets:
    - assets/sample.pdf
  1. 网络文件:如果你使用网络上的PDF文件,只需将pdfUrlOrPath变量的值替换为PDF文件的URL。

  2. 权限:如果PDF文件存储在设备的存储中,你可能需要在AndroidManifest.xmlInfo.plist中声明必要的权限。

  3. 插件配置advance_pdf_viewer2插件提供了许多自定义选项,如autoSpacingpageFlingpageSnap等,你可以根据需要调整这些选项。

这是一个基本的示例,展示了如何使用advance_pdf_viewer2插件在Flutter应用中显示PDF文件。根据你的需求,你可以进一步自定义和扩展这个示例。

回到顶部