[webview_flutter] Provide callback/error for unsupported content types (e.g., PDF)

[FisherWL]

Steps to Reproduce

on iphones it works fine, but the pdf is not shown up on android emulator or physical android phone. I guess the reason is android webview doesn't support pdf? Is there a way we can add this feature?

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: WebView(
          initialUrl:
              'https://www.wmata.com/schedules/maps/upload/2019-System-Map.pdf',
        ),
      ),
    );
  }
}

Target Platform:android Target OS version/browser: Devices:

Logs

[royalGriffin22]

Any update on this? I need this feature too.

[jans-y]

I am using in production pdf_viewer_plugin and it works nice for me.

It also supports embedded previews.

https://pub.dev/packages/pdf_viewer_plugin

[martipello]

i also have this issue i tried adding android:usesCleartextTraffic="true" to the application tag in the manifest to no avail

[deandreamatias]

This bug exists and is tracked here #41185 . There have a discussion about this and possible solutions. Please close this problem if it is duplicated. @FisherWL @VladyslavBondarenko

[VladyslavBondarenko]

Closing mentioned because current issue has more participants.

Persists with dev 1.19.0-1.0.pre.

[FisherWL]

My solution on this is converting PDF to .svg, then embed .svg into webview. Then you'll face an issue that on Android you can't pinch to zoom on that .svg/webview, my solution on that is https://github.com/flutter/plugins/pull/2451 For some reason, this PR is not reviewed yet.

[marcosnastri]

I have a same problem. In using webview and my page is load correct. This page have links to open pdf e when I click this link nothing happening.

Someone have a idea to solve this issue?

[darshankawar]

I am able to replicate this issue on dev channel (1.20.0-0.0.pre) using latest version of webview_flutter. I tried on Android Samsung galaxy device and the said pdf doesn't open on screen launch as no action takes place.

flutter doctor -v

``` [✓] Flutter (Channel dev, 1.20.0-0.0.pre, on Mac OS X 10.15.2 19C57, locale en-US) • Flutter version 1.20.0-0.0.pre at /Users/deeptibelsare/Documents/Fluttersdk/flutter • Framework revision d9653445f4 (8 days ago), 2020-06-09 18:43:03 -0400 • Engine revision e8c13aa012 • Dart version 2.9.0 (build 2.9.0-14.0.dev 5c1376615e) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/deeptibelsare/Library/Android/sdk • Platform android-29, build-tools 29.0.3 • ANDROID_HOME = /Users/deeptibelsare/Library/Android/sdk • ANDROID_SDK_ROOT = /Users/deeptibelsare/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211) ✗ Android license status unknown. Try re-installing or updating your Android SDK Manager. See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions. [✓] Xcode - develop for iOS and macOS (Xcode 11.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.3, Build version 11C29 • CocoaPods version 1.9.3 [✓] Android Studio (version 3.6) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 45.1.1 • Dart plugin version 192.7761 • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211) [✓] Connected device (1 available) • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator) ! Doctor found issues in 1 category. ```

[RauschDev]

Does anyone have a solution to this problem? I also absolutely need this feature. Everything works fine in iOS.

[Gnpiwano]

experiencing the same problems as mentioned above.

[willvlad]

Experiencing the same issue. Any update on a solution?

[deandreamatias]

Please, stop commenting on problems things like at:

any update on this

The best option is to add this emoji :+1: in the initial comment. To see a priority of each issue, we can see in which Milestone the issue is added.

Thanks

[jans-y]

Please, stop commenting on problems things like at:

any update on this

The best option is to add this emoji 👍 in the initial comment. To see a priority of each issue, we can see in which Milestone the issue is added.

Thanks

Moreover, when a working solution has already been mentioned above.

Just use https://pub.dev/packages/pdf_viewer_plugin when you detect that pdf is about to be opened. It also supports embedded previews.

[willvlad]

Please, stop commenting on problems things like at:

any update on this

The best option is to add this emoji 👍 in the initial comment. To see a priority of each issue, we can see in which Milestone the issue is added. Thanks

Moreover, when a working solution has already been mentioned above.

Just use https://pub.dev/packages/pdf_viewer_plugin when you detect that pdf is about to be opened. It also supports embedded previews.

Gotta love those patronising comments without any proper solutions! The issue I raised that has been bundled into this one is that links don't open when clicked on a webpage. The package you refer to states something quite different hence it's of no use:

pdf_viewer_plugin 1.0.0+2 Published Sep 17, 2019 FLUTTER ANDROID IOS 22 → Metadata A Flutter plugin for IOS and Android providing a simple way to display local file PDFs

As you can see, the issue is different: it's not about local pdfs, but Links to pdfs from an opened webpage...

[jans-y]

@willvlad I was using this package for the network PDFs for quite a long time in production with no issues. You can use flutter_cache_manager to download the file and the open it (you need to transfer those bytes either way).

File file = await DefaultCacheManager().getSingleFile(url);
filePath = file.path;

If you want to handle links from opened webpage, then listen for the navigation event, I believe in this library it could be done like this (inspired by https://pub.dev/packages/webview_flutter/example):

navigationDelegate: (NavigationRequest request) {
  if (request.url.endsWith('.pdf')) { // or use regex if your links include query params too
    // push new screen with pdf viewer plugin
    return NavigationDecision.prevent;
   }
  return NavigationDecision.navigate;
},

I agree that it's not enough to close this issue but at least it solves the problem for most of the people, doesn't it?

[willvlad]

This navigationDelegate property is actually quite helpful. Thanks for finding it. I wonder if there is a similar one in flutter_webview_plugin, the docs don't seem to mention anything similar. We're using that one rather than flutter_webview, which is prone to crashing our Android app whenever there are complex forms, something that doesn't happen with the community version. In any event, this navigationDelegate prop has given me an idea how one can do a workaround without using any other plugin: just push another webview substituting the requested pdf url with 'https://docs.google.com/gview?embedded=true&url=${request.url}'. Could be a decent workaround for anyone with a similar use case, until webview is able to open pdf natively

[albertopaganuzzi]

Thanks @willvlad My solution is:

navigationDelegate: (NavigationRequest request) { if (request.url.endsWith('.pdf')) { // or use regex if your links include query params too // push new screen with pdf viewer plugin Navigator.push( context, MaterialPageRoute( builder: (context) => VediPDF(url:'https://docs.google.com/gview?embedded=true&url=${request.url}')), ); return NavigationDecision.navigate; } return NavigationDecision.navigate; },

Create VediPDF with new WebView with parameter url

[ghost]

Is there a fix planned for it?

[mathrocco]

For those using flutter_webview_plugin instead, here's the @jans-y solution adapted for this package. I'm using the open_file package to let android handle document opening for me:

flutterWebViewPlugin.onStateChanged.listen((viewState) async {
  if (viewState.url.contains('.pdf')) {
    _openPdf(viewState.url);
  }
}

...

Future<void> _openPdf(String url) async {
  final file = await DefaultCacheManager().getSingleFile(url);
  OpenFile.open(file.path);
}

If your file requires authentication to download, you can set cookies using the header parameter like this:

final file = await DefaultCacheManager().getSingleFile(
  url,
  headers: {
    'cookie': 'cookie_name=cookie_value',
  },
);

Hope it helps 👍🏼

[edezacas]

I understand the real problem is that it doesn't return any errors, so we can't manage the pdf display.

If the Webview returned an error when trying to load url with pdf, it could be managed with another plugin.

Any suggestion?

[omar313]

Thanks @albertopaganuzzi , but sometimes docs viewer is not showing the doc, for that my solution is `WebView( initialUrl: 'https://docs.google.com/viewer?url=${request.url}', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (webController) { webViewController = webController; }, onPageFinished: (url) async { if(webViewController != null){ var title = await webViewController.getTitle(); if (title.isEmpty) { webViewController.reload(); } }

  },
)`

[EinatK]

following - any planned fix here?

[bharathiselvan]

Will this issue be fixed?..

[stuartmorgan]

Retitling; the fact that PDF isn't displayed is a function of the platform webview itself, but we should look into whether we can provide APIs to allow graceful handling of this within client applications.

[PerLycke]

That would be nice. None of the suggested workarounds with special treatment for PDF links works if the PDF is hosted in binary form without the .pdf ending. This forces you to exit the app and use an external browser to handle such cases.

[danagbemava-nc]

The issue is reproducible on master 2.5.0-6.0.pre.40 and stable 2.2.3 with webview_flutter: ^2.0.10.

flutter doctor -v

``` [✓] Flutter (Channel master, 2.5.0-6.0.pre.40, on macOS 11.5.1 20G80 darwin-arm, locale en-GH) • Flutter version 2.5.0-6.0.pre.40 at /Users/nexus/dev/sdks/flutters • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7d76a827c0 (9 hours ago), 2021-08-09 15:21:17 -0700 • Engine revision 4fef55db10 • Dart version 2.14.0 (build 2.14.0-385.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.5.1, Build version 12E507 • CocoaPods version 1.10.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2020.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) [✓] VS Code (version 1.59.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.25.0 [✓] Connected device (3 available) • Nexus’ IPhone (mobile) • 00008020-001875E83A38002E • ios • iOS 14.6 18F72 • iPhone 12 (mobile) • F2592D43-5FE3-46BB-8A2B-A38BA468DCE9 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.131 • No issues found! ``` ``` [✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.1 20G80 darwin-arm, locale en-GH) • Flutter version 2.2.3 at /Users/nexus/dev/sdks/flutter • Framework revision f4abaa0735 (6 weeks ago), 2021-07-01 12:46:11 -0700 • Engine revision 241c87ad80 • Dart version 2.13.4 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.5.1, Build version 12E507 • CocoaPods version 1.10.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2020.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) [✓] VS Code (version 1.59.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.25.0 [✓] Connected device (3 available) • Nexus’ IPhone (mobile) • 00008020-001875E83A38002E • ios • iOS 14.6 • iPhone 12 (mobile) • F2592D43-5FE3-46BB-8A2B-A38BA468DCE9 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.131 • No issues found! ```

[igor17400]

I'm having the same issue here. When using webview_flutter on iOS PDF renders correctly. But when using Android PDF return a white background.

[blasten]

cc @bparrishMines

[bparrishMines]

I haven't been able to find an API for Android WebView that displays a PDF. I believe the only options are to download the pdf and display it or use an online pdf viewer as explained in https://github.com/flutter/flutter/issues/48245#issuecomment-663892618

This navigationDelegate property is actually quite helpful. Thanks for finding it. I wonder if there is a similar one in flutter_webview_plugin, the docs don't seem to mention anything similar. We're using that one rather than flutter_webview, which is prone to crashing our Android app whenever there are complex forms, something that doesn't happen with the community version. In any event, this navigationDelegate prop has given me an idea how one can do a workaround without using any other plugin: just push another webview substituting the requested pdf url with 'https://docs.google.com/gview?embedded=true&url=${request.url}'. Could be a decent workaround for anyone with a similar use case, until webview is able to open pdf natively

[blasten]

@bparrishMines Thanks. do we know what happens when a user clicks on a link that points to a pdf file? Is that case handled by webview or the system ? What about zip files, etc? do we have a callback for unhandled media types?

As far as rendering a PDF from a URL is concerned, the pdf_viewer_plugin plugin seems like the right solution. https://github.com/lubritto/pdf_viewer_plugin

[xieenming]

Any fix to this issue planned ? It is unbelievable that in iOS it can load PDFs in a web page but in Android it can not ...

[polarby]

Any updates on this issue?

[albertopaganuzzi]

No updates, sorry

Da: Paul V. @.> Inviato: sabato 3 dicembre 2022 08:31 A: flutter/flutter @.> Cc: albertopaganuzzi @.>; Mention @.> Oggetto: Re: [flutter/flutter] [webview_flutter] Provide callback/error for unsupported content types (e.g., PDF) (#48245)

Any updates on this issue?

— Reply to this email directly, view it on GitHub https://github.com/flutter/flutter/issues/48245#issuecomment-1336104559 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AFRSX3UNL4PDO2ZMIOJGZ2LWLLZMZANCNFSM4KDG35KA . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AFRSX3W2QIFK4LD5EVNX3L3WLLZMZA5CNFSM4KDG35KKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOJ6RVM3Y.gif Message ID: @. @.> >

--

---

Privacy e riservatezza: il presente messaggio, così come i relativi allegati, contengono dati ed informazioni da considerarsi strettamente riservate ed è indirizzato esclusivamente al destinatario sopra indicato, il quale è l'unico autorizzato a trattarlo in osservanza delle norme del Regolamento UE 2016/679 (RGPD). Preghiamo chiunque ricevesse questo messaggio per errore di evitare di copiarlo, divulgarlo, distribuirlo a terzi e di dare notizia al mittente dell’errato invio, distruggendone poi l'eventuale copia cartacea e la copia in formato elettronico. Grazie.

[wanbinkimoon]

If, like in my case, the requirements is to have a shallow access to the pdf, just use

launchMode: Platform.isAndroid
  ? LaunchMode.externalApplication
  : LaunchMode.inAppWebView,

[Faiizii]

+1