Flutter WebView blob pdf 下载

Question

我正在尝试使用flutter从网站下载文件，我首先使用了evaluateJavaScript并在单击生成按钮之前更改了一些值，该按钮应该将适当的pdf文件下载到手机。

这是我的代码：

InAppWebView(
        initialUrl: '...',
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
              debuggingEnabled: true,
              useOnDownloadStart: true,
              javaScriptEnabled: true,
          ),
        ),
        //javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (InAppWebViewController webViewController) {
          _controller = webViewController;
          },
          onLoadStop: (_controller ,url) async {
          await _loadData();

          _controller.evaluateJavascript(source:
"console.log(document.getElementById('field-lastname').value = '${data[Field.name]}' );"
+"console.log(document.getElementById('generate-btn').click());"

           );
          },

          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,);
          },

      ),

打印出来的网址是这样的

onDownloadStart blob:https://example.com/a2a5316c-9290-4da7-8a2a-9f899861046a

这是控制台：

有人能帮我吗？

Answer 1

使用 blob url 下载文件很棘手，并且在 Flutter 中的 webviews 的当前状态下不支持开箱即用。有3个流行的插件

• flutter_webview_plugin - （社区）
• webview_flutter（官方）
• flutter_inappwebview

在社区存储库中的 README 中有一个注释

我们正在与 Flutter 团队密切合作，将所有社区插件功能集成到官方 WebView 插件中。我们将尽最大努力解决 PR​​ 和错误修正，但我们现在的首要任务是合并我们的两个代码库。合并完成后，我们将弃用社区插件以支持官方插件

要构建完全有效且无错误的 webview，还有很多工作要做。目前对于这里提到的更具挑战性的任务，最好的尝试是使用flutter_inappwebview，它非常流行并且被很多人成功使用。存在与 blob 文件相关的问题。正如我们在您的代码段中看到的，您已经使用了这个插件。要下载 blob 文件，您可以尝试将 blob:url 转换为 base64 就像在这种情况下从 Android WebViewClient 中的网站下载 Blob 文件

可能的解决方法

到您的 webview( _controller) 添加JavaScriptHandler. 我认为onWebViewCreated可能没问题。

        controller.addJavaScriptHandler(
          handlerName: _webViewHandlerName,
          callback: (data) async {
            if (data.isNotEmpty) {
              final String receivedFileInBase64 = data[0];
              final String receivedMimeType = data[1];

              // NOTE: create a method that will handle your extensions
              final String yourExtension =
                  _mapMimeTypeToYourExtension(receivedMimeType); // 'pdf'

              _createFileFromBase64(
                  receivedFileInBase64, 'YourFileName', yourExtension);
            }
          },
        );

JavaScript 处理程序将接收存储在数组中的两个值。第一个参数是以 base64 编码的文件，第二个参数是 mimeType 例如application/pdf. 拥有有关 mimeType 的信息允许我们获取有关用于保存文件的扩展名的信息。它们可以很容易地映射应用程序/pdf => 'pdf' 等。

  _createFileFromBase64(String base64content, String fileName, String yourExtension) async {
    var bytes = base64Decode(base64content.replaceAll('\n', ''));
    final output = await getExternalStorageDirectory();
    final file = File("${output.path}/$fileName.$yourExtension");
    await file.writeAsBytes(bytes.buffer.asUint8List());
    print("${output.path}/${fileName}.$yourExtension");
    await OpenFile.open("${output.path}/$fileName.$yourExtension");
    setState(() {});
  }

最后，在可以处理 blob url 的地方调用 JavaScript。

       onDownloadStart: (controller, url) async {
        print("onDownloadStart $url");
        var jsContent = await rootBundle.loadString("assets/js/base64.js");
        await controller.evaluateJavascript(
            source: jsContent.replaceAll("blobUrlPlaceholder", url));
      },

Javascript（我更喜欢将它作为资产 base64.js 加载，比硬编码在 dart 代码中更好）它打开 blob url 并传递给 encodingBase64 数据和 mimeType 作为我们blobToBase64Handler在 dart 中的处理程序的参数。

var xhr = new XMLHttpRequest();
var blobUrl = "blobUrlPlaceholder";
console.log(blobUrl);
xhr.open('GET', blobUrl, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      var base64data = reader.result;
      var base64ContentArray = base64data.split(",")     ;
      var mimeType = base64ContentArray[0].match(/[^:\s*]\w+\/[\w-+\d.]+(?=[;| ])/)[0];
      var decodedFile = base64ContentArray[1];
      console.log(mimeType);
      window.flutter_inappwebview.callHandler('blobToBase64Handler', decodedFile, mimeType);
    };
  };
};
xhr.send();

来源：从 Android WebViewClient 内的网站下载 Blob 文件

来源：如何在 Flutter 中解码 base64 PDF 字符串？

它不干净，看起来很笨拙，但找不到更好更容易的了