flutter如何实现pdf预览

在Flutter中如何实现PDF预览功能？目前项目需要在线查看PDF文件，尝试过使用flutter_pdf_view插件但加载网络PDF时不太稳定。请问有没有更可靠的方案？最好能支持本地缓存和进度显示，求推荐成熟稳定的插件或实现思路。

2 回复

Flutter中可使用pdf和printing库实现PDF预览。首先加载PDF文件，然后使用SfPdfViewer或Printing.layoutPdf进行预览和打印。

更多关于flutter如何实现pdf预览的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现PDF预览，主要有以下几种方案：

1. 使用 flutter_pdfview 插件（推荐）

这是最常用的PDF预览解决方案。

安装依赖：

dependencies:
  flutter_pdfview: ^1.3.1

基本用法：

import 'package:flutter_pdfview/flutter_pdfview.dart';

class PDFViewer extends StatelessWidget {
  final String pdfPath;
  
  PDFViewer({required this.pdfPath});
  
  @override
  Widget build(BuildContext context) {
    return PDFView(
      filePath: pdfPath,
      enableSwipe: true,
      swipeHorizontal: true,
      autoSpacing: false,
      pageFling: false,
      onRender: (pages) {
        print('PDF渲染完成，总页数: $pages');
      },
      onError: (error) {
        print(error.toString());
      },
      onPageError: (page, error) {
        print('$page: ${error.toString()}');
      },
      onViewCreated: (PDFViewController pdfViewController) {
        // 控制器可用于编程控制PDF
      },
    );
  }
}

2. 使用 advance_pdf_viewer 插件

适合需要更多自定义功能的场景。

安装依赖：

dependencies:
  advance_pdf_viewer: ^2.0.0

基本用法：

import 'package:advance_pdf_viewer/advance_pdf_viewer.dart';

class PDFScreen extends StatefulWidget {
  @override
  _PDFScreenState createState() => _PDFScreenState();
}

class _PDFScreenState extends State<PDFScreen> {
  PDFDocument? document;
  
  @override
  void initState() {
    super.initState();
    loadDocument();
  }
  
  loadDocument() async {
    document = await PDFDocument.fromAsset('assets/sample.pdf');
    setState(() {});
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: document != null 
          ? PDFViewer(document: document!)
          : Center(child: CircularProgressIndicator()),
    );
  }
}

3. 从不同来源加载PDF

// 从网络加载
PDFDocument.fromURL('https://example.com/document.pdf');

// 从文件加载
PDFDocument.fromFile(File('/path/to/file.pdf'));

// 从资产加载
PDFDocument.fromAsset('assets/document.pdf');

4. 完整示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PDFPreviewScreen(),
    );
  }
}

class PDFPreviewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF预览'),
      ),
      body: PDFView(
        filePath: 'assets/sample.pdf',
        enableSwipe: true,
        swipeHorizontal: false,
        autoSpacing: true,
      ),
    );
  }
}

注意事项：

  • 确保在 pubspec.yaml 中正确配置资源路径
  • 处理加载状态和错误情况
  • 考虑添加页面导航控件
  • 测试不同来源的PDF文件

这些方案都能很好地实现PDF预览功能，选择哪种取决于你的具体需求和偏好。

回到顶部