Flutter PDF查看插件flutter_lp_pdfview的使用

Flutter PDF查看插件flutter_lp_pdfview的使用

Native PDF View for iOS and Android

xscode

使用此包作为库

1. 依赖它

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_lp_pdfview: ^3.0.1

2. 安装它

可以通过命令行安装包：

通过 Flutter:

$ flutter packages get

或者，您的编辑器可能支持 pub get 或 flutter packages get。请查阅您的编辑器文档以了解更多信息。

3. 配置

iOS

通过在应用的 Info.plist 文件中添加一个布尔属性来启用嵌入式视图预览，键为 io.flutter.embedded_views_preview，值为 YES。

<!-- Info.plist -->
...
<key>io.flutter.embedded_views_preview</key>
<true/>
...

4. 导入它

在 Dart 代码中使用：

import 'package:flutter_lp_pdfview/flutter_lp_pdfview.dart';

选项

名称 Android iOS 默认值
defaultPage ✅ ✅ 0
onViewCreated ✅ ✅ null
onRender ✅ ✅ null
onPageChanged ✅ ✅ null
onError ✅ ✅ null
onPageError ✅ ❌ null
onLinkHandle ✅ ✅ null
gestureRecognizers ✅ ✅ null
filePath ✅ ✅
pdfData ✅ ✅
fitPolicy ✅ ❌ FitPolicy.WIDTH
enableSwipe ✅ ✅ true
swipeHorizontal ✅ ✅ false
password ✅ ✅ null
nightMode ✅ ❌ false
autoSpacing ✅ ✅ true
pageFling ✅ ✅ true
pageSnap ✅ ❌ true
preventLinkNavigation ✅ ✅ false

控制器选项

名称 描述 参数 返回值
getPageCount 获取总页数 - Future<int>
getCurrentPage 获取当前页 - Future<int>
setPage 跳转到指定页 int page Future<bool>

示例

PDFView(
  filePath: path,
  enableSwipe: true,
  swipeHorizontal: true,
  autoSpacing: false,
  pageFling: false,
  onRender: (_pages) {
    setState(() {
      pages = _pages;
      isReady = true;
    });
  },
  onError: (error) {
    print(error.toString());
  },
  onPageError: (page, error) {
    print('$page: ${error.toString()}');
  },
  onViewCreated: (PDFViewController pdfViewController) {
    _controller.complete(pdfViewController);
  },
  onPageChanged: (int page, int total) {
    print('page change: $page/$total');
  },
),

生产环境使用

如果您使用 ProGuard，请包含以下行：

-keep class com.shockwave.**

依赖项

Android

AndroidPdfViewer

iOS (仅支持 > 11.0)

PDFKit

示例代码

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

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter_lp_pdfview/flutter_lp_pdfview.dart';

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

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

class _MyAppState extends State<MyApp> {
  String pathPDF = "";
  String landscapePathPdf = "";
  String remotePDFpath = "";
  String corruptedPathPDF = "";

  [@override](/user/override)
  void initState() {
    super.initState();
    fromAsset('assets/corrupted.pdf', 'corrupted.pdf').then((f) {
      setState(() {
        corruptedPathPDF = f.path;
      });
    });
    fromAsset('assets/demo-link.pdf', 'demo.pdf').then((f) {
      setState(() {
        pathPDF = f.path;
      });
    });
    fromAsset('assets/demo-landscape.pdf', 'landscape.pdf').then((f) {
      setState(() {
        landscapePathPdf = f.path;
      });
    });

    createFileOfPdfUrl().then((f) {
      setState(() {
        remotePDFpath = f.path;
      });
    });
  }

  Future<File> createFileOfPdfUrl() async {
    Completer<File> completer = Completer();
    print("Start download file from internet!");
    try {
      // "https://berlin2017.droidcon.cod.newthinking.net/sites/global.droidcon.cod.newthinking.net/files/media/documents/Flutter%20-%2060FPS%20UI%20of%20the%20future%20%20-%20DroidconDE%2017.pdf";
      // final url = "https://pdfkit.org/docs/guide.pdf";
      final url = "http://www.pdf995.com/samples/pdf.pdf";
      final filename = url.substring(url.lastIndexOf("/") + 1);
      var request = await HttpClient().getUrl(Uri.parse(url));
      var response = await request.close();
      var bytes = await consolidateHttpClientResponseBytes(response);
      var dir = await getApplicationDocumentsDirectory();
      print("Download files");
      print("${dir.path}/$filename");
      File file = File("${dir.path}/$filename");

      await file.writeAsBytes(bytes, flush: true);
      completer.complete(file);
    } catch (e) {
      throw Exception('Error parsing asset file!');
    }

    return completer.future;
  }

  Future<File> fromAsset(String asset, String filename) async {
    Completer<File> completer = Completer();

    try {
      var dir = await getApplicationDocumentsDirectory();
      File file = File("${dir.path}/$filename");
      var data = await rootBundle.load(asset);
      var bytes = data.buffer.asUint8List();
      await file.writeAsBytes(bytes, flush: true);
      completer.complete(file);
    } catch (e) {
      throw Exception('Error parsing asset file!');
    }

    return completer.future;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter PDF View',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Plugin example app')),
        body: Center(child: Builder(
          builder: (BuildContext context) {
            return Column(
              children: <Widget>[
                RaisedButton(
                  child: Text("Open PDF"),
                  onPressed: () {
                    if (pathPDF != null || pathPDF.isNotEmpty) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PDFScreen(path: pathPDF),
                        ),
                      );
                    }
                  },
                ),
                RaisedButton(
                  child: Text("Open Landscape PDF"),
                  onPressed: () {
                    if (landscapePathPdf != null || landscapePathPdf.isNotEmpty) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PDFScreen(path: landscapePathPdf),
                        ),
                      );
                    }
                  },
                ),
                RaisedButton(
                  child: Text("Remote PDF"),
                  onPressed: () {
                    if (remotePDFpath != null || remotePDFpath.isNotEmpty) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PDFScreen(path: remotePDFpath),
                        ),
                      );
                    }
                  },
                ),
                RaisedButton(
                  child: Text("Open Corrupted PDF"),
                  onPressed: () {
                    if (pathPDF != null) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PDFScreen(path: corruptedPathPDF),
                        ),
                      );
                    }
                  },
                )
              ],
            );
          },
        )),
      ),
    );
  }
}

class PDFScreen extends StatefulWidget {
  final String path;

  PDFScreen({Key? key, this.path = ""}) : super(key: key);

  _PDFScreenState createState() => _PDFScreenState();
}

class _PDFScreenState extends State<PDFScreen> with WidgetsBindingObserver {
  final Completer<PDFViewController> _controller =
      Completer<PDFViewController>();
  int pages = 0;
  int currentPage = 0;
  bool isReady = false;
  String errorMessage = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Document"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {},
          ),
        ],
      ),
      body: Stack(
        children: <Widget>[
          PDFView(
            filePath: widget.path,
            enableSwipe: true,
            swipeHorizontal: true,
            autoSpacing: false,
            pageFling: true,
            pageSnap: true,
            defaultPage: currentPage,
            fitPolicy: FitPolicy.BOTH,
            preventLinkNavigation:
                false, // 如果设置为 true，则链接将在 flutter 中处理
            backgroundColor: 0xFF1C1C1E,
            onRender: (_pages) {
              setState(() {
                pages = _pages;
                isReady = true;
              });
            },
            onError: (error) {
              setState(() {
                errorMessage = error.toString();
              });
              print(error.toString());
            },
            onPageError: (page, error) {
              setState(() {
                errorMessage = '$page: ${error.toString()}';
              });
              print('$page: ${error.toString()}');
            },
            onViewCreated: (PDFViewController pdfViewController) {
              _controller.complete(pdfViewController);
            },
            onLinkHandler: (String uri) {
              print('goto uri: $uri');
            },
            onPageChanged: (int page, int total) {
              print('page change: $page/$total');
              setState(() {
                currentPage = page;
              });
            },
          ),
          errorMessage.isEmpty
              ? !isReady
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : Container()
              : Center(
                  child: Text(errorMessage),
                )
        ],
      ),
      floatingActionButton: FutureBuilder<PDFViewController>(
        future: _controller.future,
        builder: (context, AsyncSnapshot<PDFViewController> snapshot) {
          if (snapshot.hasData) {
            return FloatingActionButton.extended(
              label: Text("Go to ${pages ~/ 2}"),
              onPressed: () async {
                await snapshot.data?.setPage(pages ~/ 2);
              },
            );
          }

          return Container();
        },
      ),
    );
  }
}

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

1 回复

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


flutter_lp_pdfview 是一个用于在 Flutter 应用中查看 PDF 文件的插件。它基于 PDFView，并提供了简单易用的 API 来加载和显示 PDF 文件。以下是如何在 Flutter 项目中使用 flutter_lp_pdfview 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_lp_pdfview 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_lp_pdfview: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 flutter_lp_pdfview 包：

import 'package:flutter_lp_pdfview/flutter_lp_pdfview.dart';

3. 使用 LPPDFView 组件

你可以使用 LPPDFView 组件来显示 PDF 文件。以下是一个简单的示例：

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

class PDFViewerScreen extends StatelessWidget {
  final String pdfUrl;

  PDFViewerScreen({required this.pdfUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: LPPDFView(
        filePath: pdfUrl,
        onError: (error) {
          print("Error loading PDF: $error");
        },
        onPageChanged: (int page, int total) {
          print("Page changed: $page/$total");
        },
      ),
    );
  }
}

4. 导航到 PDF 查看页面

你可以在应用的其他部分导航到这个 PDFViewerScreen，并传递 PDF 文件的 URL 或路径：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PDFViewerScreen(pdfUrl: 'https://example.com/sample.pdf'),
  ),
);

5. 处理本地文件

如果你想加载本地 PDF 文件，可以使用 filePath 参数传递本地文件的路径：

LPPDFView(
  filePath: 'assets/sample.pdf',
  onError: (error) {
    print("Error loading PDF: $error");
  },
  onPageChanged: (int page, int total) {
    print("Page changed: $page/$total");
  },
);

确保在 pubspec.yaml 中正确配置了 assets：

flutter:
  assets:
    - assets/sample.pdf
回到顶部