flutter 的 in_app_web_view实现下载功能
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作为翻译:运行顺序:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfahkb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01