Flutter WebView加载含多PDF链接页面：Android端PDF无法打开求助

Ah, I've run into this exact issue before! The problem boils down to a key difference between iOS and Android's WebView implementations: iOS's WKWebView has built-in PDF rendering support, but Android's Chromium-based WebView doesn't include it by default. Here are a few reliable solutions to fix this:

Solution 1: Intercept PDF links and use a dedicated PDF viewer plugin #

This approach gives you full control over the PDF viewing experience and works offline for local files. We'll use flutter_pdfview (a popular, lightweight PDF viewer plugin) to handle PDF links.

Step 1: Add dependencies #

First, update your pubspec.yaml to include the required packages:

dependencies:
  webview_flutter: ^4.4.0 # Use the latest stable version
  flutter_pdfview: ^1.2.4 # Check for the latest version on pub.dev

Step 2: Modify your WebView to intercept PDF links #

Update your existing WebView code to add a navigationDelegate that catches PDF links and redirects them to the dedicated viewer:

body: SafeArea(
  child: WebView(
    initialUrl: filePath,
    javascriptMode: JavascriptMode.unrestricted,
    navigationDelegate: (NavigationRequest request) {
      // Detect if the target URL is a PDF
      if (request.url.toLowerCase().endsWith('.pdf')) {
        // Prevent the WebView from trying to load it
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => PDFViewerPage(pdfUrl: request.url),
          ),
        );
        return NavigationDecision.prevent;
      }
      // Allow all other links to load normally
      return NavigationDecision.navigate;
    },
    onWebViewCreated: (WebViewController webViewController) {
      _webViewController = webViewController;
      _webViewController.clearCache();
      _webViewController.reload();
    },
  ),
),

Step 3: Create the PDF viewer page #

Add a new widget to display the PDF using flutter_pdfview:

import 'package:flutter_pdfview/flutter_pdfview.dart';

class PDFViewerPage extends StatelessWidget {
  final String pdfUrl;

  const PDFViewerPage({super.key, required this.pdfUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PDF Viewer')),
      body: PDFView(
        // Handle both local files and remote URLs
        url: pdfUrl.startsWith('http') ? pdfUrl : null,
        filePath: pdfUrl.startsWith('http') ? null : pdfUrl,
        enableSwipe: true,
        swipeHorizontal: true,
        autoSpacing: false,
        pageFling: false,
        onError: (error) => print('PDF load error: $error'),
        onPageError: (page, error) => print('Page $page error: $error'),
      ),
    );
  }
}

Solution 2: Use Google Docs' embedded viewer (no extra plugins needed) #

If you don't want to add another plugin, you can redirect PDF links to Google Docs' online viewer, which renders PDFs in the WebView. Note that this requires an internet connection and relies on Google services.

Update the navigationDelegate in your WebView code:

navigationDelegate: (NavigationRequest request) {
  if (request.url.toLowerCase().endsWith('.pdf')) {
    // Encode the PDF URL and load it via Google Docs
    final encodedUrl = Uri.encodeComponent(request.url);
    final googleDocsViewerUrl = 'https://docs.google.com/gview?embedded=true&url=$encodedUrl';
    _webViewController.loadUrl(googleDocsViewerUrl);
    return NavigationDecision.prevent;
  }
  return NavigationDecision.navigate;
},

Important Notes #

• For remote PDF URLs: Ensure your AndroidManifest.xml includes the INTERNET permission (it should already be there if you're loading web pages).
• For local PDF files: You'll need to request file read permissions and ensure the file path is accessible to the app.

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