🧐

Flutter Web×apiで生成したファイルをダウンロードするには？

2022/10/10に公開

Flutter

【前提】
Flutter Web × apiサーバー(Rails)で作っていた際に、以下の条件を満たす形で
ファイルダウンロードをしたいと思っていました。

api側で認証した後に、pngやpdfなど、必要なデータをzip化
生成したzipをsend_dataでバイナリデータをフロントに返却(他の言語でも似たようにバイナリで返す処理があると思う)
受け取ったバイナリデータを元に、ファイルデータを作成
そのファイルをパソコンにダウンロード

その上で検討した方法が以下の通りですが、どれもうまく行かず。

ダウンロードのエンドポイントをurl_launcherで別ブラウザで開くように叩かせて、ブラウザの機能でダウンロードさせる
- url_launcherでは認証するためのAuthorization要素をヘッダーに設定できないため、api側で認証できない
AnchorElementのhrefにダウンロードのエンドポイントを設定して、クリックしてダウンロード
- [参考]https://zenn.dev/tsuruo/articles/0e5f2f3696148f
- これだと、認証するためのAuthorization要素をヘッダーに設定できないため、api側で認証できない

【結果的に】

file_selectorというライブラリで解決できました！

【使い方】

Future getDownload() async {
  final dio = Dio();
  dio.options.headers = {'Authorization': 'Bearer $token'};
  final res = await dio.get('http://localhost:3000/api/test/downloads');

  String? path = await getSavePath();
  if (path == null) {
    return;
  } else {
    const String mimeType = 'application/zip';
    final file = XFile.fromData(res.data!, mimeType: mimeType, name: 'document.zip');
    await file.saveTo(path);
  }
}

多分、CSVやpdfなどでも同じような書き方ができるかと思います。
これで、管理システムとかでよくあるCSVダウンロード機能も実装できるようになりますね😄

追記

もしFlutterについて気になるという方がいたら、
自分も入っている「Flutter大学」というコミュニティがあるので、
よかったら参加してみるのも良いと思います💪
https://kboyflutteruniv.com/

それではみなさん、良き開発ライフを〜👋

追記

Discussion