美文网首页
Android WebView下载blob链接文件

Android WebView下载blob链接文件

作者: 板栗炖牛肉 | 来源:发表于2020-10-29 15:15 被阅读0次

前言

在做萤石云视频时候,嵌入萤石云视频网站下载图片时,碰到了blob:链接开头的图片。在Pc web端下载是正常的,但是android web端却是不能下载。
百度了一下blob:
blob:https并不是一种协议,而是html5中blob对象在赋给video标签后生成的一串标记,blob对象对象包含的数据,浏览器内部会解析。

参考链接

解决方案

1.设置webview,这是基础设置

   WebSettings webSettings = webView.getSettings();
   //基础设置
   webSettings.setJavaScriptEnabled(true);

2.设置webview监听下载(因为是点击链接下载,所以不需要这一步的可以忽略)

        //设置、下载监听
        webView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
                downBlobUrl(url);
            }
        });

3.使用js工具写好解析blob的代码(纯文本写也可,正确就行)

    var request = new XMLHttpRequest();
        request.open('GET', '" + url + "', true);
        request.setRequestHeader('Content-type', 'text/plain');
        request.responseType = 'blob';
        request.onload = function (e) {
            console.log('执行测试:' + this.status);
            if (this.status === 200) {
                var blobFile = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blobFile);
                reader.onloadend = function () {
                   var base64data = reader.result;
                    window.java.down(base64data);
                }
            }
        };
        request.send();

4.设置webview 调试输出(查看webview输出信息,可忽略)

        //加载、调试工具
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
                ZLog.e(TAG, consoleMessage.message());
                return super.onConsoleMessage(consoleMessage);
            }
        });

5.注入java反射

        webView.addJavascriptInterface(new Object() {
      
            @JavascriptInterface
            public void down(String base64) {
                //这里收到下载解析的base64、做相关处理
                Bitmap bitmap = Base64Util.base64ToPicture(base64);
                Base64Util.savePictureToAlbum(getContext(), bitmap);
            }

        }, "java");

6.注入js(点击下载,java就会收到url,再将bloburl传给webview解析获取到base64文件)

    /**
     * 下载、Blob图片
     *
     * @param url
     */
    private void downBlobUrl(String url) {
        if (url.startsWith("blob")) {
            String blob = "  var request = new XMLHttpRequest();" +
                    "        request.open('GET', '" + url + "', true);" +
                    "        request.setRequestHeader('Content-type', 'text/plain');" +
                    "        request.responseType = 'blob';" +
                    "        request.onload = function (e) {" +
                    "            console.log('执行测试:'+this.status);" +
                    "            if (this.status === 200) {" +
                    "                var blobFile = this.response;" +
                    "                var reader = new FileReader();" +
                    "                reader.readAsDataURL(blobFile);" +
                    "                reader.onloadend = function() {" +
                    "                var base64data = reader.result;" +
                    "                window.java.down(base64data);" +
                    "                }" +
                    "             }" +
                    "        };" +
                    "        request.send();";

            String js = "javascript:" + blob;
            webView.loadUrl(js);
        }
    }

7.解析base64,将图片放到相册

    /**
     * 将图片base64数据转化为bitmap
     *
     * @param imgBase64
     * @return
     * @throws Exception
     */
    public static Bitmap base64ToPicture(String imgBase64) throws Exception {
        //处理头部
        if (imgBase64.contains(",")) {
            imgBase64 = imgBase64.split(",")[1];
        }
        //解码开始
        byte[] decode = Base64.decode(imgBase64, Base64.DEFAULT);
        Bitmap bitmap = BitmapFactory.decodeByteArray(decode, 0, decode.length);
        return bitmap;
    }


    /**
     * 将图片保存到相册并通知刷新
     *
     * @param mContext
     * @param bitmap
     * @throws Exception
     */
    public static void savePictureToAlbum(Context mContext, Bitmap bitmap) throws Exception {
        if (bitmap == null) {
            return;
        }
        //把文件插入到系统图库
        MediaStore.Images.Media.insertImage(mContext.getContentResolver(), bitmap, System.currentTimeMillis() + "", null);
        //发送广播,通知图库更新
        mContext.sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.parse("file://" + "/sdcard/namecard/")));
    }

PS

我这里的webview是加载了相关链接的,如果只需要处理下载blob文件直接loadUrl可能会出现跨域问题

相关文章

  • Android WebView下载blob链接文件

    前言 在做萤石云视频时候,嵌入萤石云视频网站下载图片时,碰到了blob:链接开头的图片。在Pc web端下载是正常...

  • iOS采坑记录

    采坑记录 iOS 通过 Webview点击下载链接问题 Webview点击下载链接,需要通过文件名下载文件,需要通...

  • Android—在WebView中下载Blob协议文件

    之前有个需求是要下载Blob协议的gif,让我苦恼了好久。平时下载http协议的文件时直接获取输入流即可,但是Ja...

  • Android WebView实现文件下载

    Android的WebView默认是不支持下载的,如果一个链接是下载链接的话,WebView默认是无法处理的,这时...

  • 混合开发-文件预览功能

    实测:IOS:webview 支持 文件通过a链接打开预览Android: webview 受限,需要原生支持通过...

  • WebView控件之文件下载

    通常webview渲染的界面中含有可以下载文件的链接,点击该链接后,应该开始执行下载的操作并保存文件到本地中。we...

  • android webview实现下载文件

    android webview不能直接下载文件 所以要实现下载文件要调用内置浏览器如下 这样就可以了

  • Android中的WebView详解

    WebView详解 基本用法 清单文件配置WebView

  • js用blob下载文件打开乱码

    js处理下载的时候可以使用blob对象处理,将后端返回的流文件转换成blob对象,然后创建a链接,触发其点击事件下...

  • Android中的WebView详解

    Android中的WebView详解 WebView详解 基本用法 布局文件配置WebView WebView加载...

网友评论

      本文标题:Android WebView下载blob链接文件

      本文链接:https://www.haomeiwen.com/subject/rgzqvktx.html