flutter与前端交互,利用in_app_web_view实现下载功能:
首先下载库,终端输入
flutter pub add flutter_inappwebview
之后导出
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
即可使用。
创建in_app_web_view:
InAppWebView( initialOptions: InAppWebViewGroupOptions( crossPlatform:InAppWebViewOptions( useOnDownloadStart:true, ), android: AndroidInAppWebViewOptions() ), //老版本:initialUrl 新版本:initialUrlRequest initialUrlRequest: URLRequest( url: Uri.parse(widget.url), ) )
因为要下载文件,所以请务必手动设置 useOnDownloadStart 为 true(否则出发文件下载的监听)。
initialUrlRequest中可填写自己想首先打开的url地址。
https://github.com/pichillilorenzo/flutter_inappwebview_examples/blob/main/file_download/lib/main.dart
填写自己需要的回调(例子中的一点错误,没有开启 useOnDownloadStart, 因此不会下载成功,在使用时请设置为true)
正常情况下,配合downloader和android_path_provider,普通https链接即可下载文件。
而遇到blob链接时,还需要进行更多操作来确保文件的下载:
可参考javascript - Flutter WebView blob pdf download - Stack Overflow
https://stackoverflow.com/questions/64865972/flutter-webview-blob-pdf-download/64902313#64902313
因为Android不支持blob链接下载,因此我们嵌套javascript处理下载链接,在in_app_web_view的build中重写onWebViewCreated方法,添加javascriptHandler:
onWebViewCreated: (InAppWebViewController controller) { if (mounted) { setState(() { _inAppWebCtrl = controller; _inAppWebCtrl!.addJavaScriptHandler( handlerName: 'blobToBase64Handler', 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 extension = _mapMimeTypeToExtension(receivedMimeType); String tmpFileName = 'tmpfile'; _createFileFromBase64( receivedFileInBase64, tmpFileName, extension); } }, ); }); } },
首先在assets中添加js文件夹,然后创建 base64.js 文件
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();
注意js中的callhander的名字参数,对应创建webview时addJavascriptHandler中的name。
另外是文件类型映射函数和文件下载函数:
String _mapMimeTypeToExtension(String mimeType) { String extension = ''; switch(mimeType) { case 'image/png': extension = 'png'; break; case 'application/msword': extension = 'doc'; break; case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': extension = 'docx'; break; case 'image/jpeg': extension = 'jpg'; break; case 'image/gif': extension = 'gif'; break; case 'image/svg+xml': extension = 'svg'; break; case 'image/tiff': extension = 'tif'; break; case 'text/plain': extension = 'txt'; break; case 'application/vnd.ms-powerpoint': extension = 'ppt'; break; case 'application/vnd.openxmlformats-officedocument.presentationml.presentation': extension = 'pptx'; break; case 'application/vnd.ms-excel': extension = 'xls'; break; case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': extension = 'xlsx'; break; case 'application/zip': extension = 'zip'; break; case 'application/x-7z-compressed': extension = '7z'; break; case 'application/pdf': extension = 'pdf'; break; } return extension; } _createFileFromBase64(String base64content, String fileName, String yourExtension) async { var bytes = base64Decode(base64content.replaceAll('\n', '')); final file = File("$_localPath/$fileName.$yourExtension"); await file.writeAsBytes(bytes.buffer.asUint8List()); }
最后重写inappwebview中的下载请求方法:
onDownloadStartRequest: (controller, downloadStartRequest) async { var jsContent = await rootBundle.loadString("assets/js/base64.js"); // 运行javascript代码解析blob await controller.evaluateJavascript( source: jsContent.replaceAll("blobUrlPlaceholder", downloadStartRequest.url.toString())); },
总结:因为android本身不能解析blob,我们因此使用javascript作为翻译:运行顺序:
onDownloadStartRequest -> javascript文件 -> webviewController中的handler的callback,最后以流的方式写入文件。
标签:case,web,String,extension,app,break,blob,flutter From: https://www.cnblogs.com/jiang448/p/17463750.html