Flutter PDF渲染插件pdf_render的使用指南

尽管pdf_render插件现在处于维护模式，且推荐使用新的插件pdfrx，但对于一些特定的需求或现有的项目中，了解如何使用pdf_render仍然很有帮助。下面是一个完整的示例Demo和详细的说明。

安装

首先，在您的项目的pubspec.yaml文件中添加依赖：

dependencies:
  pdf_render: ^1.4.12

然后运行 flutter pub get 来安装该包。

对于Web平台，您需要在index.html中添加以下脚本标签：

<!-- IMPORTANT: load pdfjs files -->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js" type="text/javascript"></script>
<script type="text/javascript">
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.worker.min.js";
  pdfRenderOptions = {
    // where cmaps are downloaded from
    cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/cmaps/",
    // The cmaps are compressed in the case
    cMapPacked: true,
    // any other options for pdfjsLib.getDocument.
    // params: {}
  };
</script>

示例代码

以下是一个简单的例子，展示了如何在Flutter应用中显示一个PDF文件。

最简示例

import 'package:flutter/material.dart';
import 'package:pdf_render/pdf_render_widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Easiest PDF sample'),
        ),
        backgroundColor: Colors.grey,
        body: PdfViewer.openAsset('assets/hello.pdf')
      )
    );
  }
}

使用PdfViewerParams自定义

您可以使用PdfViewerParams来定制PDF查看器的行为，比如设置初始页面等。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Pdf_render example app'),
      ),
      backgroundColor: Colors.grey,
      body: PdfViewer.openAsset(
        'assets/hello.pdf',
        params: PdfViewerParams(pageNumber: 2), // 显示第2页
      )
    ),
  );
}

网络支持

由于pdf_render不直接支持从网络加载PDF文件，您可以结合flutter_cache_manager来实现这一功能：

FutureBuilder<File>(
  future: DefaultCacheManager().getSingleFile(
    'https://github.com/espresso3389/flutter_pdf_render/raw/master/example/assets/hello.pdf'
  ),
  builder: (context, snapshot) => snapshot.hasData
    ? PdfViewer.openFile(snapshot.data!.path)
    : Container(), // placeholder widget
)

控制器操作

通过PdfViewerController，您可以执行更多高级操作，如跳转到指定页面、调整缩放比例等。

final controller = PdfViewerController();

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Pdf_render example app'),
      ),
      body: PdfViewer.openAsset(
        'assets/hello.pdf',
        viewerController: controller,
        params: PdfViewerParams(
          onViewerControllerInitialized: (PdfViewerController c) {
            controller = c;
            controller.goToPage(pageNumber: 3); // 跳转至第3页
          }
        )
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: Icon(Icons.first_page),
            onPressed: () => controller.ready?.goToPage(pageNumber: 1),
          ),
          FloatingActionButton(
            child: Icon(Icons.last_page),
            onPressed: () => controller.ready?.goToPage(pageNumber: controller.pageCount),
          ),
        ],
      ),
    ),
  );
}

以上是关于pdf_render的基本使用介绍，包括了从最基础的PDF展示到较为复杂的控制与自定义。如果您正在考虑新项目或者现有项目需要更强大的PDF处理能力，可以考虑迁移到pdfrx。