Flutter PDF查看插件ivlivs_pdf_viewer的使用

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

Flutter PDF查看插件ivlivs_pdf_viewer的使用

一个基本的跨平台PDF查看器。

在原生平台上，使用了pdfrx库。
在Web端，使用浏览器内置的PDF查看器。

特性

提供了一个注重性能的基本PDF查看器用于Flutter。

开始使用

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  ivlivs_pdf_viewer:

然后在你的Dart文件中导入插件：

import "package:ivlivs_pdf_viewer/ivlivs_pdf_viewer.dart";

使用示例

以下是一个完整的示例，展示如何使用ivlivs_pdf_viewer插件来显示PDF文件。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // 引入AssetBundle
import 'package:ivlivs_pdf_viewer/ivlivs_pdf_viewer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PDF Viewer Example'),
        ),
        body: PdfViewerPage(),
      ),
    );
  }
}

class PdfViewerPage extends StatefulWidget {
  @override
  _PdfViewerPageState createState() => _PdfViewerPageState();
}

class _PdfViewerPageState extends State<PdfViewerPage> {
  String sourceName = "sample.pdf"; // PDF文件名
  Uint8List data; // PDF数据

  @override
  void initState() {
    super.initState();
    loadPdfData(); // 初始化时加载PDF数据
  }

  Future<void> loadPdfData() async {
    data = (await rootBundle.load("assets/$sourceName")).buffer.asUint8List();
    setState(() {}); // 状态更新以触发UI重建
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: data == null
          ? CircularProgressIndicator() // 加载中
          : PdfViewer(
              sourceName: sourceName,
              data: data,
            ),
    );
  }
}

说明

  1. 加载PDF数据：

    • 在initState方法中调用loadPdfData函数来异步加载PDF数据。
    • rootBundle.load方法从项目资源中加载PDF文件，并将其转换为Uint8List。

  2. 显示PDF：

    • 当PDF数据加载完成后，使用PdfViewer组件显示PDF文件。
    • 如果数据尚未加载完成，则显示一个CircularProgressIndicator作为加载指示器。

确保在pubspec.yaml文件中正确配置了资产文件路径，例如：

flutter:
  assets:
    - assets/sample.pdf

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用ivlivs_pdf_viewer插件来查看PDF文件的代码示例。ivlivs_pdf_viewer是一个流行的Flutter插件，用于在应用中嵌入和查看PDF文档。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加ivlivs_pdf_viewer依赖：

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

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

2. 导入插件

在你的Dart文件中导入ivlivs_pdf_viewer：

import 'package:ivlivs_pdf_viewer/ivlivs_pdf_viewer.dart';

3. 使用PDFViewer组件

接下来，你可以使用PDFViewer组件来显示PDF文件。以下是一个简单的示例，展示如何加载并显示一个本地PDF文件或网络上的PDF文件。

本地PDF文件

假设你有一个名为sample.pdf的文件放在assets文件夹中，你需要在pubspec.yaml中声明这个资产：

flutter:
  assets:
    - assets/sample.pdf

然后，你可以这样加载并显示它：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PDF Viewer Demo'),
        ),
        body: Center(
          child: PDFViewer(
            documentPath: 'assets/sample.pdf', // 本地PDF文件路径
          ),
        ),
      ),
    );
  }
}

网络上的PDF文件

如果你有一个网络上的PDF文件URL，你可以直接传递这个URL给PDFViewer：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PDF Viewer Demo'),
        ),
        body: Center(
          child: PDFViewer(
            documentPath: 'https://example.com/sample.pdf', // 网络PDF文件URL
          ),
        ),
      ),
    );
  }
}

4. 运行应用

确保所有文件都已正确配置，然后运行你的Flutter应用。你应该能够在应用中看到加载并显示的PDF文件。

注意事项

  • 确保PDF文件的路径或URL是有效的。
  • 对于本地文件，确保它们已经被正确声明在pubspec.yaml的assets部分。
  • 根据需要调整UI布局，以适应不同屏幕和设备。

这个示例展示了基本的ivlivs_pdf_viewer使用方法。你可以根据需要进一步自定义和扩展功能。

回到顶部