Downloading file with blob url is tricky and not supported out of the box in the current state of webviews in Flutter. There are 3 popular plugins
There is a note at README in community repository
We are working closely with the Flutter Team to integrate all the
Community Plugin features in the Official WebView Plugin. We will try
our best to resolve PRs and Bugfixes, but our priority right now is to
merge our two code-bases. Once the merge is complete we will deprecate
the Community Plugin in favor of the Official one
There is a lot of work yet to build fully working and bugfree webview. Currently for more challenging tasks like this mentioned here, the best attempt is to use flutter_inappwebview which is very popular and used by a lot people with success. There is issue associated with blob files. As we can see in your snippet you already used this plugin. To download blob file you can try convert blob:url to base64 like in this case Download Blob file from Website inside Android WebViewClient
Possible workaround
To your webview (_controller) add JavaScriptHandler. I would assume onWebViewCreated might be ok.
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 handler will receive two values stored in array. First argument is file encoded in base64 and second one is mimeType e.g. application/pdf. Having information about mimeType allows us to get information about extension which should be used to save file with.
They can be easly mapped application/pdf => 'pdf' etc.
_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(() {});
}
Finally where blob url can be handled the JavaScript is invoked.
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 (I prefer to load it as an asset base64.js, better than hardcoded in dart code)
It opens blob url and pass to encodedBase64 data and mimeType as arguments to our handler blobToBase64Handler in 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();
source: Download Blob file from Website inside Android WebViewClient
source: How to decode base64 PDF string in Flutter?
It's not clean and looks hacky but could not find better and easier
