Flutter 中显示网络 PDF：从 URL 到设备，分步指南

2024-03-15 04:12:22

在 Flutter 中显示网络 PDF: 完整指南

前言

在当今以数字为中心的世界中，PDF 已成为分发文档和信息的宝贵格式。对于 Flutter 开发人员而言，能够在应用程序中轻松地显示网络 PDF 至关重要。本文将引导您了解使用 Flutter pdfview 包从 URL 显示网络 PDF 的详细步骤，解决常见问题并提供最佳实践。

问题概述

在使用 pdfview 包时，您可能遇到无法显示从 URL 下载的 PDF 的问题。这是因为 pdfview 不支持直接从 URL 加载 PDF，而是需要一个本地文件路径。

解决方法

为了在 Flutter 中显示网络 PDF，需要先将其下载到本地设备，然后将路径传递给 pdfview。以下是如何实现的：

下载 PDF： 使用网络请求库（如 dio）将 PDF 从 URL 下载到设备。
创建本地文件： 在应用程序的临时目录中创建一个文件来存储下载的 PDF。
保存 PDF： 将下载的 PDF 字节保存到本地文件中。
打开 PDF： 使用 pdfview 包的 PDFView 小部件，传递本地文件路径，即可显示 PDF。

示例代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:path_provider/path_provider.dart';

class PDFViewPage extends StatefulWidget {
  final String url;
  PDFViewPage({Key? key, required this.url}) : super(key: key);

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

class _PDFViewPageState extends State<PDFViewPage> {
  File? file;

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

  Future<void> _downloadAndOpenPDF() async {
    try {
      // 下载 PDF
      Response<List<int>> response = await Dio().get(widget.url, options: Options(responseType: ResponseType.bytes));
      
      // 获取临时目录
      Directory directory = await getApplicationDocumentsDirectory();
      
      // 创建本地文件
      file = File('${directory.path}/document.pdf');
      
      // 保存 PDF
      await file!.writeAsBytes(response.data!);
      
      // 打开 PDF
      setState(() {});
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Viewer')),
      body: (file != null) ? PDFView(filePath: file!.path) : Center(child: CircularProgressIndicator()),
    );
  }
}