Flutter PDF阅读插件pdf_viewer_plugin的使用

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

Flutter PDF阅读插件pdf_viewer_plugin的使用

简介

pdf_viewer_plugin 是一个用于iOS和Android平台的Flutter插件，它提供了一种简单的方法来显示PDF文件。此插件使得在Flutter应用中集成PDF查看功能变得轻而易举。

  • 特性:
    • 显示PDF文件
  • 示例: android           ios

安装

首先，在您的 pubspec.yaml 文件中添加 pdf_viewer_plugin 作为依赖项。

iOS 配置

对于iOS项目，需要在 ios/Runner/info.plist 中添加以下内容：

<key>io.flutter.embedded_views_preview</key>
<true/>

示例代码

以下是使用 pdf_viewer_plugin 插件的一个完整示例，该示例展示了如何从网络下载PDF文件并将其显示在应用中。

示例Demo

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'package:pdf_viewer_plugin/pdf_viewer_plugin.dart';

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

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

class _MyAppState extends State<MyApp> {
  final sampleUrl = 'http://www.africau.edu/images/default/sample.pdf';

  String? pdfFilePath;

  // 下载并保存PDF文件到本地
  Future<String> downloadAndSavePdf() async {
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/sample.pdf');
    if (await file.exists()) {
      return file.path;
    }
    final response = await http.get(Uri.parse(sampleUrl));
    await file.writeAsBytes(response.bodyBytes);
    return file.path;
  }

  // 加载PDF文件
  void loadPdf() async {
    pdfFilePath = await downloadAndSavePdf();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (context) {
        return Scaffold(
          backgroundColor: Colors.black,
          appBar: AppBar(
            title: Text('Plugin example app'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                ElevatedButton(
                  child: Text("Load pdf"),
                  onPressed: loadPdf,
                ),
                if (pdfFilePath != null)
                  Expanded(
                    child: Container(
                      child: PdfView(path: pdfFilePath!),
                    ),
                  )
                else
                  Text("Pdf is not Loaded"),
              ],
            ),
          ),
        );
      }),
    );
  }
}

通过上述代码，您可以创建一个简单的Flutter应用程序，该应用程序允许用户点击按钮以加载和显示PDF文件。如果PDF文件已经存在于设备上，则直接加载；否则，将从提供的URL下载PDF文件并保存到本地存储中，然后再进行加载。

如果您有任何问题或建议，请随时访问 GitHub Issues 提交反馈，或者直接提交 Pull Requests 来帮助改进这个插件！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用pdf_viewer_plugin来阅读和显示PDF文件的示例代码。需要注意的是，pdf_viewer_plugin这个包名在Flutter社区中可能并不唯一，且某些包可能已经停止维护或更名。因此，这里假设我们使用的是一个常见的、活跃维护的PDF查看插件，例如pdf_viewer_flutter（这只是一个示例，实际使用时请确认插件名称和最新版本）。

首先，确保你的Flutter环境已经配置好，并且已经创建了一个新的Flutter项目。

1. 添加依赖

在你的pubspec.yaml文件中添加pdf_viewer_flutter依赖（注意，实际使用时请替换为最新的、活跃的PDF查看插件）：

dependencies:
  flutter:
    sdk: flutter
  pdf_viewer_flutter: ^x.y.z  # 替换为实际版本号

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

2. 导入插件

在你的Dart文件中（例如main.dart），导入插件：

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

3. 创建PDF查看页面

创建一个新的页面或Widget来显示PDF文件。以下是一个简单的示例：

class PDFViewerPage extends StatefulWidget {
  final String pdfAssetPath;

  PDFViewerPage({required this.pdfAssetPath});

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

class _PDFViewerPageState extends State<PDFViewerPage> {
  late PDFDocument document;

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

  void loadDocument() async {
    // 假设你的PDF文件是放在assets目录下的
    document = await PDFDocument.fromAsset(widget.pdfAssetPath);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: PDFViewer(document: document),
    );
  }
}

4. 配置assets

在pubspec.yaml文件中配置你的PDF文件作为assets：

flutter:
  assets:
    - assets/sample.pdf  # 替换为你的PDF文件路径

确保你的PDF文件位于项目的assets目录下。

5. 使用PDF查看页面

在你的主页面或导航逻辑中，添加对PDFViewerPage的使用：

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: HomePage(),
    );
  }
}

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

6. 运行应用

使用flutter run命令运行你的Flutter应用，你应该能够在应用中看到一个按钮，点击后会导航到PDF查看页面并显示PDF文件。

请注意，以上代码是基于一个假设的插件pdf_viewer_flutter编写的，实际使用时你需要替换为最新的、活跃的PDF查看插件，并根据其文档进行相应的调整。此外，确保你的PDF文件路径和文件名是正确的。

回到顶部