Flutter PDF缩略图生成插件pdf_thumbnail的使用

安装 💻

为了开始使用 Pdf Thumbnail，您必须在您的机器上安装 Flutter SDK。

在 pubspec.yaml 文件中添加 pdf_thumbnail：

dependencies:
  pdf_thumbnail:

然后运行以下命令来安装它：

flutter packages get

示例 ✍️

以下是使用 pdf_thumbnail 插件生成 PDF 缩略图的示例代码：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdf_thumbnail/pdf_thumbnail.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'PDF Thumbnail Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<File> pdfFile;

  var currentPage = 0;

  [@override](/user/override)
  void initState() {
    pdfFile = DownloadService.downloadFile(pdfUrl, 'sample.pdf');
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        elevation: 0,
      ),
      body: FutureBuilder<File>(
          future: pdfFile,
          builder: (context, snapshot) {
            return Center(
              child: snapshot.hasData
                  ? PdfThumbnail.fromFile(
                      snapshot.data!.path,
                      currentPage: currentPage,
                      backgroundColor: Theme.of(context).primaryColor.withOpacity(0.3),
                      height: 200,

                      /// 显示页码的 widget。
                      /// 这个 widget 将会放在堆栈中。
                      currentPageWidget: (page, isCurrentPage) {
                        return Positioned(
                          bottom: 50,
                          right: 0,
                          child: Container(
                            height: 30,
                            width: 30,
                            color: isCurrentPage ? Colors.green : Colors.pink,
                            alignment: Alignment.center,
                            child: Text(
                              '$page',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        );
                      },

                      /// 自定义装饰以便高亮当前页面。
                      currentPageDecoration: const BoxDecoration(
                        color: Colors.white,
                        border: Border(
                          bottom: BorderSide(
                            color: Colors.orange,
                            width: 10,
                          ),
                        ),
                      ),
                      onPageClicked: (page) {
                        /// 您可以更新当前页面，
                        /// 或者使用大多数 PDF 查看器包的控制器来跳转到该页面。
                        /// 例如：_controller.setPage(page);
                        setState(() {
                          currentPage = page + 1;
                        });
                        if (kDebugMode) {
                          print('Page $page clicked');
                        }
                      },
                    )
                  : const CircularProgressIndicator(),
            );
          }),
    );
  }
}

const pdfUrl = 'https://icseindia.org/document/sample.pdf';

class DownloadService {
  static final _httpClient = HttpClient();

  static Future<File> downloadFile(String url, String filename) async {
    var request = await _httpClient.getUrl(Uri.parse(url));
    var response = await request.close();
    var bytes = await consolidateHttpClientResponseBytes(response);
    String dir = (await getApplicationDocumentsDirectory()).path;
    File file = File('$dir/$filename');
    await file.writeAsBytes(bytes);
    return file;
  }
}

缓存 ⏲

pdf_thumbnail 包没有内置缓存机制，以保持包的简单性。您可以自己创建一个类从 ImageThumbnailCacher 并实现 read 和 write 方法。

这里是一个简单的示例，使用 Hive 来缓存：

class ThumbnailCacher implements ImageThumbnailCacher {
  [@override](/user/override)
  Future<PageToImage?> read(String id) async {
    // 读取缓存逻辑
    return api.localStorage.readThumbnails(id);
  }

  [@override](/user/override)
  Future<bool> write({required String id, required PageToImage map}) {
    // 写入缓存逻辑
    return api.localStorage.writeThumbnails(id: id, map: map);
  }
}