Flutter-如何在WebView中下载文件?

时间:2019-09-14 17:12:00

标签: android flutter dart android-webview

我正在使用flutter_webview_plugin:^ 0.3.8,但是我对webview_flutter也有相同的问题:^ 0.3.13。

在webview中,我想利用一个在成功完成验证码后触发文件下载的网站。但是,我完成了验证码,没有任何反应,没有下载。

Flutter中是否有类似Webview下载侦听器(“ webview.setDownloadListener”)的内容?我只需要Android版的这个。

如果没有,是否可以从Flutter中的Webview下载文件?

2 个答案:

答案 0 :(得分:1)

可以找到类似的问题here

您可以使用我的插件flutter_inappwebview,它是Flutter插件,允许您添加内联WebView或打开应用程序内浏览器窗口,并具有许多事件,方法和选项来控制WebView。它可以识别Android(使用setDownloadListener)和iOS平台上的可下载文件!

我在这里报告与类似问题相同的answer

要识别可下载的文件,您需要设置useOnDownloadStart: true选项,然后才能收听onDownloadStart事件!

例如,在Android上,您还需要在AndroidManifest.xml文件中添加写权限:

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

然后,您需要使用permission_handler插件请求权限。相反,要有效下载文件,您可以使用flutter_downloader插件。

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

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插件来获取我要保存文件的文件夹。

答案 1 :(得分:0)

只需将此代码添加到您的 AndroidManifest.xml

   <provider
            android:name="vn.hunghd.flutterdownloader.DownloadedFileProvider"
            android:authorities="${applicationId}.flutter_downloader.provider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/provider_paths"/>
    </provider>

并将此代码添加到您的 AndroidManifest.xml

它对我有用