Flutter - 如何在 WebView 中下载文件? [英] Flutter - How to download files in WebView?

问题描述

我正在使用 flutter_webview_plugin: ^0.3.8 但我在使用 webview_flutter: ^0.3.13 时遇到了同样的问题.

I am using flutter_webview_plugin: ^0.3.8 but I have the same problem with webview_flutter: ^0.3.13.

在 webview 中，我想利用一个网站，该网站在成功完成验证码后触发文件下载.然而，我完成了验证码，没有任何反应，没有下载.

In webview, I want to make use of a website which triggers a file download on successful completion of a captcha. However, I complete the captcha and nothing happens, no download.

Flutter 中是否有类似 webview 下载侦听器(webview.setDownloadListener")的东西?我只在 Android 上需要这个.

Is there something in Flutter like a webview download listener ("webview.setDownloadListener")? I only need this for Android.

如果没有，有没有办法从 Flutter 中的 webview 下载文件?

If not, is there a way of downloading files from a webview in Flutter?

推荐答案

可以找到类似的问题 这里！

A similar issue can be found here!

您可以使用我的插件 flutter_inappwebview，这是一个 Flutter 插件，可以让您添加内联 WebView或者打开一个应用内浏览器窗口，它有很多事件、方法和选项来控制 WebView.它可以识别 Android(使用 setDownloadListener)和 iOS 平台中的可下载文件！

You can use my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews. It can recognize downloadable files in both Android (using setDownloadListener) and iOS platforms!

我在这里报告了我对类似问题给出的相同答案:

I report here the same answer that I gave to the similar issue:

为了能够识别可下载的文件，您需要设置useOnDownloadStart: true 选项，然后您就可以监听onDownloadStart 事件！

To be able to recognize downloadable files, you need to set the useOnDownloadStart: true option, and then you can listen the onDownloadStart event!

此外，例如，在 Android 上，您需要在 AndroidManifest.xml 文件中添加写入权限:

Also, for example, on Android you need to add write permission inside your AndroidManifest.xml file:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

然后，您需要使用 permission_handler 插件请求许可.相反，要有效地下载您的文件，您可以使用 flutter_downloader 插件.

Then, you need to ask permission using the permission_handler plugin. Instead, to effectively download your file, you can use the flutter_downloader plugin.

这是一个使用 http://ovh.net/files/ 的完整示例(特别是，http://ovh.net/files/1Mio.dat 作为 URL)来测试下载:

Here is a complete example using http://ovh.net/files/ (in particular, the http://ovh.net/files/1Mio.dat as URL) to test the download:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_downloader/flutter_downloader.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlutterDownloader.initialize(
      debug: true // optional: set false to disable printing logs to console
  );
  await Permission.storage.request();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController webView;

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

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
          Expanded(
              child: InAppWebView(
            initialUrl: "http://ovh.net/files/1Mio.dat",
            initialHeaders: {},
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                debuggingEnabled: true,
                useOnDownloadStart: true
              ),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
            },
            onLoadStart: (InAppWebViewController controller, String url) {

            },
            onLoadStop: (InAppWebViewController controller, String url) {

            },
            onDownloadStart: (controller, url) async {
              print("onDownloadStart $url");
              final taskId = await FlutterDownloader.enqueue(
                url: url,
                savedDir: (await getExternalStorageDirectory()).path,
                showNotification: true, // show download progress in status bar (for Android)
                openFileFromNotification: true, // click on notification to open downloaded file (for Android)
              );
            },
          ))
        ])),
      ),
    );
  }
}

在这里，如您所见，我还使用了 path_provider 插件来获取文件夹我要保存文件的位置.

Here, as you can see, I'm using also the path_provider plugin to get the folder where I want to save the file.

这篇关于Flutter - 如何在 WebView 中下载文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！