Flutter 서버 연동(http) - 파일 다운로드 기능 (xlsx, hwp 등)

Flutter 서버 http로 연동할 때 파일을 다운받는 형태로 만들어야 하는 상황이 간혹 있습니다. 머리아파요;

 

일단 저의 엄청난 짜깁기 실력으로 일궈낸 결과이므로 구체적인 설명이 불가능합니다.

 

먼저 http를 이용한 서버 연동 코드입니다. 보내고 불러오는 코드는 다를 바가 없어요.

문제는 받아온 값들을 파일로 변환시켜 사용자가 다운로드 받을 수 있게끔 해야하는 부분이죠.

Future.microtask(() async {
  final uri = Uri.parse(
      base_url + '/download');

  final map = jsonEncode({
    "id": id,
  });

  Map<String, String> headers = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': "Bearer " + token!
  };

  http.Response response = await http.post(
    uri,
    headers: headers,
    body: map,
  );


  if (response.statusCode == 200) {
    
  	final _base64 = base64Encode(response.bodyBytes); //인코딩
  	final anchor = AnchorElement(
  	href: 'data:application/octet-stream;base64,$_base64')
  	..target = 'blank';

    	var myFormat = DateFormat('yyyy-MM-dd'); // 파일 다운로드 이름을 날짜로 하기위해
    	DateTime _date = new DateTime.now();

    	anchor.download = "file_" +
        	myFormat.format(_date).toString() +
        	".xls"; // 엑셀 파일이면 xls 혹은 xlsx 그 외에는 다른 확장자를 적어줍니다.

    	document.body!.append(anchor); // 다운로드!!
    	anchor.click();
    	anchor.remove();

  }
});

 

if문 내부를 보면 되는데 base64Encode, AnchorElement이라...

 

한번 AnchorElement를 설명하기 위해 서치해봤어요.

https://api.flutter.dev/flutter/dart-html/AnchorElement-class.html

AnchorElement class - dart:html library - Dart API

잘 모르겠네요.. 아무래도 파일을 다운로드할 수 있는 클래스로 추정됩니다. 이 과정이 파일을 만들어 주는 과정이라 생각하면 됩니다.

 

그리고 아마 저렇게 했는데 anchor 이런 곳에 에러가 났다면 Import문을 빠뜨렸을 거에요

import 'dart:async';
import 'dart:convert';
import 'dart:html';
import 'package:http/http.dart' as http;

필수입니다.......

다운로드 받을 때 파일 이름과 확장자만 설정 잘 해두면 돼요

 

코드는 생각보다 너무 간단한데 제가 개발할 때만 하더라도 이 정보를 찾기가 쉽지 않았습니다.🤬

 

-FINISH-