Flutter中如何让flutter_cached_pdfview内的PDF链接在WebView打开

问题背景 #

我使用flutter_cached_pdfview库集成了PDF查看器，当前PDF内的链接会直接跳转到外部浏览器（Chrome、Safari），希望改为在应用内的WebView中打开这些链接。现有核心代码如下：

import 'package:flutter_cached_pdfview/flutter_cached_pdfview.dart';
  
goToReading(String link){
  Navigator.push(context, MaterialPageRoute(
      builder: (_)=> PDF(
        enableSwipe: true,
        swipeHorizontal: false,
        autoSpacing: false,
        pageFling: false,
        onError: (error) {
          print(error.toString());
        },
        onPageError: (page, error) {
          print('$page: ${error.toString()}');
        },
      ).fromUrl(link,
          placeholder: (progress) => Scaffold(
            backgroundColor: Colors.white,
            body: Center(
              child: Lottie.asset(
                'assets/images/data.json',
                height: 200,
                controller: _controller,
                onLoaded: (composition) {
                  _controller..duration = composition.duration..forward();
                },
              ),
            ),
          )
      )
  ));
}

解决方案 #

要实现PDF内链接在应用内打开，需利用flutter_cached_pdfview提供的onLinkHandle回调拦截链接，再通过webview_flutter库实现应用内WebView页面。

步骤1：添加依赖 #

在pubspec.yaml中添加webview_flutter依赖：

dependencies:
  flutter_cached_pdfview: ^latest_version
  webview_flutter: ^latest_version

执行flutter pub get完成依赖安装。

步骤2：修改PDF查看器代码，添加链接拦截 #

修改goToReading函数，为PDF组件添加onLinkHandle回调，拦截链接后跳转到自定义WebView页面：

import 'package:flutter_cached_pdfview/flutter_cached_pdfview.dart';
import 'package:webview_flutter/webview_flutter.dart';

// 自定义应用内WebView页面
class InAppWebViewPage extends StatelessWidget {
  final String url;
  const InAppWebViewPage({super.key, required this.url});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网页查看')),
      body: WebViewWidget(
        controller: WebViewController()
          ..loadRequest(Uri.parse(url))
          ..setJavaScriptMode(JavaScriptMode.unrestricted),
      ),
    );
  }
}

// 修改原PDF跳转函数
goToReading(String link){
  Navigator.push(context, MaterialPageRoute(
      builder: (_)=> PDF(
        enableSwipe: true,
        swipeHorizontal: false,
        autoSpacing: false,
        pageFling: false,
        onError: (error) {
          print(error.toString());
        },
        onPageError: (page, error) {
          print('$page: ${error.toString()}');
        },
        // 拦截PDF内的链接点击事件
        onLinkHandle: (String url) {
          // 跳转到应用内WebView页面
          Navigator.push(context, MaterialPageRoute(
            builder: (_) => InAppWebViewPage(url: url),
          ));
          // 返回true表示已手动处理链接，不再触发外部浏览器跳转
          return true;
        },
      ).fromUrl(link,
          placeholder: (progress) => Scaffold(
            backgroundColor: Colors.white,
            body: Center(
              child: Lottie.asset(
                'assets/images/data.json',
                height: 200,
                controller: _controller,
                onLoaded: (composition) {
                  _controller..duration = composition.duration..forward();
                },
              ),
            ),
          )
      )
  ));
}

关键说明 #

• onLinkHandle回调会在PDF内的链接被点击时触发，返回true即可阻止系统默认的外部浏览器跳转逻辑。
• WebViewWidget是webview_flutter的核心组件，通过WebViewController加载目标URL，并启用JavaScript支持以适配多数网页的交互需求。

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