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作为翻译:运行顺序:
onDownloadStartRequest -> javascript文件 -> webviewController中的handler的callback,最后以流的方式写入文件。
flutter 的 in_app_web_view实现下载功能的更多相关文章
- iNeedle日志下载功能问题
问题: iNeedle系统本身包含日志下载功能,主要是将web服务器中的用户访问日志按照一定条件进行筛选并下载,提供管理者分析.但是这次的测试中发现iNeedle日志下载一直会卡住,web界面显示正在 ...
- Safari 下用 "location.href = filePath" 实现下载功能的诡异 bug
Safari 下的一些诡异 bug 我们已经领教一二,比如前文中说的 无痕浏览模式下使用 localStorage 的 API 就会报错.今天我们要讲的是利用 location.href = file ...
- location.href 实现点击下载功能
如果页面上要实现一个点击下载的功能,传统做法是使用一个 a 标签,然后将该标签的 href 属性地址指向下载文件在服务端的地址(相对地址或者绝对地址),比如这样: 能这样实现是因为,在浏览器地址栏输入 ...
- php实现文件上传下载功能小结
文件的上传与下载是项目中必不可少的模块,也是php最基础的模块之一,大多数php框架中都封装了关于上传和下载的功能,不过对于原生的上传下载还是需要了解一下的.基本思路是通过form表单post方式实现 ...
- JavaWeb学习记录(一)——response响应头之缓存设置与下载功能的实现
一.HTTP中常用响应头 Location: http://www.it315.org/index.jsp Server:apache tomcat Content-Encoding: gzip Co ...
- JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
- 【转】Android 服务器之SFTP服务器上传下载功能
原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...
- wuzhicms字段的添加以及实现下载功能
1.字段的添加 发布内容--> 栏目管理--> 字段管理-->添加字段 下面根据需求进行相应的设置. 然后提交即可. 2.下载功能的实现 实例说明: 会员中心相关页面下载功能的实现 ...
- windows下实现uboot的tftp下载功能
一.原理分析 带有uboot的开发板实际上充当的就是tftp客户端,而PC机扮演的角色就是tftp服务器端,而tftp下载功能实际上就是文件传输.tftp服务器可以建立在虚拟机linux下,也可以建立 ...
- 用Hopper搞定Mac迅雷的会员以及离线下载功能
转自 用Hopper搞定Mac迅雷的会员以及离线下载功能 先定位Mac迅雷的可执行文件 snakeninnys-iMac:~ snakeninny$ ls /Applications/Thunder. ...
随机推荐
- 剑指 offer 第 4 天
第 4 天 查找算法(简单) 剑指 Offer 03. 数组中重复的数字 找出数组中重复的数字. 在一个长度为 n 的数组 nums 里的所有数字都在 0-n-1 的范围内.数组中某些数字是重复的,但 ...
- 如何用java校验SQL语句的合法性?(提供五种解决方案)
方案一:使用JDBC API中提供的Statement接口的execute()方法 要在Java中校验SQL语句的合法性,可以使用JDBC API中提供的Statement接口的execute()方法 ...
- 【算法总结】强化学习部分基础算法总结(Q-learning DQN PG AC DDPG TD3)
总结回顾一下近期学习的RL算法,并给部分实现算法整理了流程图.贴了代码. 1. value-based 基于价值的算法 基于价值算法是通过对agent所属的environment的状态或者状态动作对进 ...
- 社工工具包setoolkit克隆网站钓鱼网站
实验主机:kali win10 (搭建好的dvwa靶场用于克隆登录页) setoolkit简介:setoolkit 是一个开源的社会工程学工具包.有很多选项可以使用更多操作读者自行探究. 实验开始: ...
- 如何优雅的使用ipv6穿透内网
背景 随着ipv6的普及,家庭宽带已经全面支持ipv6,通过简单的设置就可以让自己的内网设备获取到ipv6地址.不过这里的ipv6地址也不是固定,会定期的变化,不过通过DDNS可以解决这个问题.但是这 ...
- 【从零开始】Docker Desktop:听说你小子要玩我
前言 缘由 捡起遗忘的Docker知识 由于本狗近期项目紧任务重,高强度的搬砖导致摸鱼时间下降.在上线项目时,看到运维大神一系列骚操作,docker+k8s的知识如过眼云烟,忘得干净的很.所以想重新恶 ...
- android studio 做登陆界面
先来一个最简单的 AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> &l ...
- CSS3-页面布局基础一
一.CSS概要 web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现 ...
- C# 强行关闭其他软件对文件的占用
using System.Diagnostics; // 获取占用文件的进程并强制结束 public void CloseProcessByFileName(string fileName) { Pr ...
- Tars-Cpp 协程实现分析
作者:vivo 互联网服务器团队- Ye Feng 本文介绍了协程的概念,并讨论了 Tars Cpp 协程的实现原理和源码分析. 一.前言 Tars 是 Linux 基金会的开源项目(https:// ...