Flutter PDF阅读插件syncfusion_flutter_pdfviewer的使用

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

Flutter PDF阅读插件syncfusion_flutter_pdfviewer的使用

简介

syncfusion_flutter_pdfviewer

Flutter PDF Viewer 插件（syncfusion_flutter_pdfviewer）允许您在 Android、iOS、Web、Windows 和 macOS 平台上无缝且高效地查看 PDF 文档。它具有高度交互性和可定制的功能，如放大、虚拟双向滚动、页面导航、文本选择、文本搜索、页面布局选项、文档链接导航、书签导航、表单填写以及带有文本标记注释的审查。

**免责声明：**这是一个商业包。要使用此包，您需要拥有 Syncfusion® 商业许可证或 免费 Syncfusion® 社区许可证。更多详情，请参阅LICENSE文件。

功能特性

  • 虚拟滚动：轻松滚动文档中的页面，提供流畅体验。只有在需要时才会渲染页面，以提高加载和滚动性能。
  • 放大：可以高效地缩放文档内容。
  • 页面布局和滚动选项：以单页滚动模式或连续滚动模式高效布局页面，并在水平和垂直方向上滚动页面。
  • 页面导航：即时导航到所需页面。
  • 文本选择：选择PDF文档中的文本。
  • 文本搜索：快速查找并导航到PDF文档中所有出现的文本。
  • 书签导航：加载并导航已保存的书签，帮助在PDF文档中标记的主题内进行导航。
  • 文档链接注释导航：通过点击目录中的主题链接导航到指定位置。
  • 超链接导航：检测超链接，点击后将在默认浏览器中打开URL。
  • 文本标记注释：添加、删除和修改PDF文件中的文本标记注释（高亮、下划线、删除线和波浪线），用于标记重要段落、强调特定单词或短语、指示应删除的内容或表示可能有错误的文本。
  • 表单填写：填写、编辑、展平、保存、导出和导入AcroForm字段数据。
  • 右到左（RTL）：适应希伯来语和阿拉伯语等从右到左语言的用户界面和功能（如文本搜索和复制）。
  • 主题：轻松切换浅色和深色主题。
  • 本地化：将PDF Viewer中的所有静态文本本地化为任何支持的语言。

安装

安装最新版本请访问 pub.dev。

开始使用

导入包

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

添加 PDF Viewer 到 widget 树

将 SfPdfViewer 作为任何 widget 的子节点添加。以下示例中，SfPdfViewer 作为 Container 的子节点添加：

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
          child: SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf')));
}

Web集成

为了在Web平台上呈现PDF页面为图像，我们使用了PdfJs，因此必须在您的 web/index.html 文件中引用该脚本文件。

在 web/index.html 文件中添加以下 <script> 标签，放在文档的 <body> 中：

<script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script type="text/javascript">
   pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js";
</script>

加载 PDF 文档

从 Asset 加载

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfPdfViewer.asset(
              'assets/flutter-succinctly.pdf'));
}

从网络加载

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf'));
}

从文件加载

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfPdfViewer.file(
              File('storage/emulated/0/Download/flutter-succinctly.pdf')));
}

从内存加载

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfPdfViewer.memory(
              bytes));
}

加载加密的 PDF 文档

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
          child: SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf',
              password: 'syncfusion')));
}

示例代码

以下是一个完整的示例代码，展示了如何使用 syncfusion_flutter_pdfviewer 查看 PDF 文档，并包含了一个书签按钮：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Syncfusion PDF Viewer Demo',
    home: HomePage(),
  ));
}

/// Represents Homepage for Navigation
class HomePage extends StatefulWidget {
  const HomePage({super.key});

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

class _HomePage extends State<HomePage> {
  final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(
              Icons.bookmark,
              color: Colors.white,
              semanticLabel: 'Bookmark',
            ),
            onPressed: () {
              _pdfViewerKey.currentState?.openBookmarkView();
            },
          ),
        ],
      ),
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        key: _pdfViewerKey,
      ),
    );
  }
}

其他有用链接

如果您有任何其他问题或需要进一步的帮助，请联系 Syncfusion® 支持团队 或通过 社区论坛 提问。您还可以通过我们的 反馈门户 提交功能请求或报告Bug。


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

Harmonyos Next教程
1 回复

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


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

首先，确保你已经在pubspec.yaml文件中添加了syncfusion_flutter_pdfviewer依赖项：

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

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用syncfusion_flutter_pdfviewer来显示PDF文件。

1. 导入必要的包

在你的Dart文件中，导入syncfusion_flutter_pdfviewer包：

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

2. 创建一个PDF查看器页面

创建一个新的Dart文件（例如pdf_viewer_page.dart），并添加以下代码：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

class PDFViewerPage extends StatefulWidget {
  final String pdfAssetPath;

  PDFViewerPage({required this.pdfAssetPath});

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

class _PDFViewerPageState extends State<PDFViewerPage> {
  late PdfViewerController _pdfViewerController;

  @override
  void initState() {
    super.initState();
    _pdfViewerController = PdfViewerController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: PdfViewer.builder(
        pdfDocumentPath: widget.pdfAssetPath,
        controller: _pdfViewerController,
        builder: (context, document) {
          return PdfViewerWidget(
            document: document,
            controller: _pdfViewerController,
          );
        },
      ),
    );
  }
}

3. 在主应用中使用PDF查看器页面

在你的主应用文件（例如main.dart）中，使用Navigator来导航到PDF查看器页面。假设你有一个PDF文件存储在assets文件夹中，例如assets/sample.pdf。

首先，确保在pubspec.yaml中声明了资产文件：

flutter:
  assets:
    - assets/sample.pdf

然后，在main.dart中添加以下代码：

import 'package:flutter/material.dart';
import 'pdf_viewer_page.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: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PDFViewerPage(pdfAssetPath: 'assets/sample.pdf')),
            );
          },
          child: Text('Open PDF'),
        ),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的Flutter应用，点击“Open PDF”按钮，应该会导航到一个新的页面，显示并允许你阅读PDF文件。

这个示例展示了如何使用syncfusion_flutter_pdfviewer插件在Flutter应用中显示和阅读PDF文件。你可以根据需要进一步自定义和扩展这个示例。

回到顶部