Flutter技术问询：如何通过URL调用浏览器或应用打开PDF文件？

方法一：用url_launcher调用系统默认应用打开 #

很多时候用url_launcher失败是因为权限配置不全，按以下步骤来：

1. 添加依赖到pubspec.yaml：

dependencies:
  url_launcher: ^6.2.5

2. 配置平台权限：
   • 安卓：在android/app/src/main/AndroidManifest.xml里添加查询权限：

   <queries>
     <intent>
       <action android:name="android.intent.action.VIEW" />
       <data android:mimeType="application/pdf" />
     </intent>
   </queries>
   

   • iOS：在ios/Runner/Info.plist里添加：

   <key>LSApplicationQueriesSchemes</key>
   <array>
     <string>https</string>
   </array>
   

3. 调用代码：

import 'package:url_launcher/url_launcher.dart';

Future<void> openPdfWithSystemApp(String pdfUrl) async {
  final Uri pdfUri = Uri.parse(pdfUrl);
  if (await canLaunchUrl(pdfUri)) {
    await launchUrl(
      pdfUri,
      // 指定用外部应用打开
      mode: LaunchMode.externalApplication,
      webViewConfiguration: const WebViewConfiguration(enableJavaScript: false),
    );
  } else {
    // 处理打开失败的逻辑，比如提示用户无可用应用
    print('无法打开该PDF链接');
  }
}

方法二：用open_file_plus下载后打开 #

如果url_launcher无法直接唤起，这个方法会先把PDF下载到本地临时目录，再调用系统应用打开：

1. 添加依赖：

dependencies:
  open_file_plus: ^3.3.5
  path_provider: ^2.1.2
  http: ^1.2.1

2. 实现代码：

import 'package:open_file_plus/open_file_plus.dart';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;
import 'dart:io';

Future<void> downloadAndOpenPdf(String pdfUrl) async {
  // 下载PDF文件
  final response = await http.get(Uri.parse(pdfUrl));
  final pdfBytes = response.bodyBytes;

  // 获取临时目录
  final tempDir = await getTemporaryDirectory();
  final tempPdfFile = File('${tempDir.path}/temp_pdf_file.pdf');
  await tempPdfFile.writeAsBytes(pdfBytes);

  // 打开下载好的PDF
  final result = await OpenFile.open(tempPdfFile.path);
  if (result.type != ResultType.done) {
    print('打开失败：${result.message}');
  }
}

方法三：在App内嵌入PDF查看器（flutter_pdfview） #

如果不想跳转到外部应用，直接在App内展示PDF，用这个库：

1. 添加依赖：

dependencies:
  flutter_pdfview: ^1.3.4

2. 实现页面：

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

class EmbeddedPdfViewer extends StatefulWidget {
  final String pdfUrl;
  const EmbeddedPdfViewer({super.key, required this.pdfUrl});

  @override
  State<EmbeddedPdfViewer> createState() => _EmbeddedPdfViewerState();
}

class _EmbeddedPdfViewerState extends State<EmbeddedPdfViewer> {
  PDFViewController? _pdfController;
  int _totalPages = 0;
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('查看PDF'),
        actions: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Text('$_currentPage/$_totalPages'),
          )
        ],
      ),
      body: PDFView(
        // 传入网络PDF地址
        url: widget.pdfUrl,
        onViewCreated: (controller) {
          _pdfController = controller;
          controller.getPageCount().then((count) {
            setState(() {
              _totalPages = count ?? 0;
            });
          });
        },
        onPageChanged: (page, total) {
          setState(() {
            _currentPage = page ?? 0;
            _totalPages = total ?? 0;
          });
        },
      ),
    );
  }
}

// 调用方式：Navigator.push(context, MaterialPageRoute(builder: (_) => EmbeddedPdfViewer(pdfUrl: "你的PDF链接")));

内容的提问来源于stack exchange，提问作者sosnus