【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)@JavascriptInterfacepublic 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交互代码作为桥接。

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

移动开发周刊：Android ImageView正确使用、WebView与JS交互解析
写在前面从 2011 年创建首刊至今,移动开发周刊内容聚焦 Android.iOS.VR/AR 等前沿移动开发技术,精选一周最热点,解读开发技巧,从中希望能够让你有一些收获,如果你有好的文章以及优化 ...
Android WebView与JS交互入门
2019独角兽企业重金招聘Python工程师标准>>> 首先在Anndroid代码中对WebView进行初始化 webView = (WebView) findViewById(R. ...
Android学习笔记：Android基础知识点（不断更新中）
1.Android学习笔记:OkHttp 2.Android学习笔记:更新UI的方法(UI线程和非UI线程) 3.Android学习笔记:Volley 4.Android学习笔记:Handler 5. ...
WebView---android webview组件如何使用 Webview与js交互
浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview.只是其引擎不同,相对于微软的webbrowser,and ...
android和ios HybridApp的js交互
android的webview和js交互 https://github.com/chenhaifeng2016/AndroidWebview ios的uiwebview和js交互 https://gi ...
Android学习笔记之AndroidManifest.xml文件解析（摘自皮狼的博客）
Android学习笔记之AndroidManifest.xml文件解析一.关于AndroidManifest.xml AndroidManifest.xml 是每个android程序中必须的文件.它 ...
Flutter:加载本地Html、WebView与JS交互
本次教程使用的是Flutter官方提供的WebView组件webview_flutter 2.3.1,flutter_android 2.2.1 一. WebView介绍以下为Flutter Web ...
Android学习笔记 93. Room、LiveData 和 ViewModel
Android学习笔记 Android 开发者基础知识 (Java) -- Google Developers 培训团队文章目录 Android学习笔记 Android 开发者基础知识 (Java) ...
Android学习笔记21：ImageView获取网络图片
Android平台有3种网络接口可以使用,它们分别是:java.net.*(标准java接口).org.apache(Apache接口)和android.net.*(Android网络接口).本文将使 ...
Android学习笔记（七）：多个Activity和Intent
根据www.mars-droid.com:Andriod开发视频教学,先跳过书本<Beginning Android 2>的几个章,我是这两个资源一起看,需要进行一下同步.先初步了解一下应 ...

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

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

最新文章

热门文章