javascript - 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 中有一个注释

We are working closely with the Flutter Team to integrate all theCommunity Plugin features in the Official WebView Plugin. We will tryour best to resolve PRs and Bugfixes, but our priority right now is tomerge our two code-bases. Once the merge is complete we will deprecatethe Community Plugin in favor of the Official one

要构建完全正常工作且无错误的 webview，还有很多工作要做。目前对于像这里提到的更具挑战性的任务，最好的尝试是使用 flutter_inappwebview，它非常流行并且被很多成功的人使用。 There is issue associated with blob files .正如我们在您的代码段中看到的那样，您已经使用了这个插件。要下载 blob 文件，您可以尝试将 blob:url 转换为 base64，如本例 Download Blob file from Website inside Android WebViewClient
可能的解决方法
在您的 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 的信息使我们能够获取有关应该用于保存文件的扩展名的信息。
它们可以很容易地映射到 application/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(我更喜欢将其加载为 Assets base64.js，比在 dart 代码中硬编码更好)
它打开 blob url 并传递给 encodedBase64 数据和 mimeType 作为我们的处理程序的参数 blobToBase64Handler在飞镖。

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();

来源: Download Blob file from Website inside Android WebViewClient
来源: How to decode base64 PDF string in Flutter?
它不干净，看起来很老套，但找不到更好更容易的东西