【android学习笔记：Webview与Js交互】网页生成的excel/pdf等文件通过webview下载保存

【功能需求】在webview加载的网页中，使用jsPdf或jsExcel生成的文件，通过webview下载到手机保存。

【实现思考】

①能否使用webView.setDownloadListener实现？

  答案是：NO ，downloadListener需要文件下载链接，而通过前端生成的文件不存在文件链接。

②获取生成文件中的数据再通过java生成相应的文件

  也不现实，太麻烦啦，麻烦到想放弃。

③最终方案：通过js将文件base64编码和java将base64解码生成文件！

思路：web网页通过jsPdf生成pdf文件——js获取文件的base64码——通过webview与js交互，传递base64编码到webview——使用java解码base64并写入文件到手机

【代码实现】

①webview添加js调用权限

webView=(WebView)findViewById(R.id.mWebView);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(webChromeClient);
        // 设置可以支持缩放
        webView.getSettings().setSupportZoom(true);
        // 设置出现缩放工具
        webView.getSettings().setBuiltInZoomControls(true);
        //扩大比例的缩放
        webView.getSettings().setUseWideViewPort(true);
        //自适应屏幕
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webView.getSettings().setLoadWithOverviewMode(true);

②实现与js交互代码

 class decodeInterface {
        @RequiresApi(api = Build.VERSION_CODES.O)
        @JavascriptInterface
        public void decoderBase64File(String base64Code) throws IOException {
            Log.e("tag", "decoderBase64File: 被调用"+base64Code );
            String savePath= Config.filePath+"pdfDoc.pdf";
            byte[] xml=base64Code.getBytes("UTF-8");
            byte[] buffer = android.util.Base64.decode(base64Code, Base64.NO_WRAP);
           // byte[] buffer= Base64.getDecoder().decode(base64Code);
            for (int i = 0; i <buffer.length ; i++) {
                if (buffer[i] < 0) {
                    buffer[i] += 256;
				}
            }
            FileOutputStream out = new FileOutputStream(savePath);
            out.write(buffer);
            out.close();
        }
    }


//绑定
webView.addJavascriptInterface(new decodeInterface(),"wv");

③关于jsPdf怎么获取base64编码

pdf.addHTML(document.getElementById("saveBox"),options,function() {
				   pdf.save('report.pdf');
				   var datauri = pdf.output('dataurlstring');
				   console.log(datauri);
				   var base64 = datauri.substring(28);
				   wv.decoderBase64File(base64);//调用webview方法

			 });

【总结】本文只是提供一个思路，使用文件base64编码来传输文件，webview与js交互代码作为桥接。