Androidの WebView で画像などをダウンロードさせるには

AndroidのWebViewから画像などダウンロードさせたい場合。

JavaScript単体でやるのは無理でした。

たとえば Ajax とか XMLHttpRequest とか・・・

WebView向けの特殊手順が必要なので、
ここでは WebViewでダウンロード処理のやり方 とか紹介!

少し面倒なので忘備録としてメモしておきます。

 

ここでは次の場面を想定します。

  • WebView内で画像ダウンロード
  • 保存先はDonwloadsディレクトリ

その場合の基本的なやり方は次の通り

1.まずJavaScript側で画像ダウンロード

始めはJS側で画像のダウンロード処理を実行

大雑把な手順はこういう感じです。

  1. 画像をbase64形式のURLに変換
  2. そのURLを持つダウンロードリンク作成
  3. 手動または任意でダウンロードさせる

具体的なやり方は ▼次の2記事▼ を参照

ただ、この2記事だけだと分かりにくいかもしれません。

 

一応PNG画像でのコード例的なものを載せておきます。

▼ PNG画像をJS側でダウンロードさせるコード例

この時点では WebView は一切関わっていません。

だからAndroid端末への画像ダウンロード不可です。

2.WebViewにダウンロードリスナーを登録する

ここからが肝心なところ。

AndroidのWebView側でのコードを実装していきます。

まずは ダウンロードリスナーの実装 から。

例えば次のようなコードが必要になるんです。

▼ Activity内の onCreate にて・・・

こういう感じで DownloadListener  を登録

このコード内で webView.evaluateJavascript(script, null);  から実行してるJavaScriptコードは丸々コピペでOKです。基本的には変える必要はありません。

またJSコード内に Android.downloadBlob  という謎のメソッドがありますが、これは次から定義していくので気にしないでください。その名の通り Blob にしたデータをダウンロードさせるAndroid側のメソッドです。

あと webView.addJavascriptInterface(this, "Android");  のようにJSインターフェースの登録も忘れずに。ここでは分かりやすく "Android"  というインターフェース名にしました。

3.WebView側から端末へ画像ダウンロード

最後にWebView側から端末へダウンロード保存

ここでは donwloadBlob  というメソッド名ですね。

それをActivity内にこう定義しました。

▼ このようなコードを Activity 内に追加

メソッド定義の前に @JavascriptInterface  を付けるとJSインターフェースとなり、WebView内のJavaScriptコードからJavaメソッド呼び出せるようになるんですよね。

これで端末へのダウンロード保存は完了。

ここでは Donwloads ディレクトリへ保存しています。

4.ContentResolverも更新すればより親切!

これで基本的な手順は終わりなんですが・・・

1つ不便というか不親切なところが残ってます、

それはContentResolverが更新されないこと

更新されてないと次の点で不便です。

  • 端末側がファイルを認識できない
  • ファイルマネージャーでも表示されない
  • あとサムネイルとかも表示されない

だから ContentResolver 更新まですると親切です。

 

そのコード例を載せておくと次の通り

▼ 先ほどの downloadBlob  にこういうJavaコード追加

こうしておくとファイルマネーにも画像が表示され、保存画像(ファイル)にすぐアクセスできます。そちらの方が親切なのは言うまでもありません。

WebView画像ダウンロード手順のまとめ

長くなったので手順だけまとめ!

以上、WebViewで画像などファイルダウンロードさせる手順でした。

もし誤りなどあればコメントでご指摘ください。ではでは(^^)/~~~