Flutter 웹 애플리케이션에서 텍스트 파일을 저장하고 다운로드하는 방법


9

Flutter를 처음 사용하고 flutter 웹 응용 프로그램에서 작업하고 있습니다. 요구 사항은 텍스트 파일을 만들고 다운로드하는 것입니다. 아래처럼.

void getData() {
    List<int> bytes = utf8.encode('this is the text file');
    print(bytes); // Need to download this with txt file.
}

누구든지 이것을 달성하도록 도울 수 있습니까?

답변:


12

이 방법은 HTML문서 조작을 기반으로 합니다. 일부 추가 패키지를 가져와야합니다.

import 'dart:convert';
import 'dart:html' as html; // or package:universal_html/prefer_universal/html.dart

코드 스 니펫 :

final text = 'this is the text file';

// prepare
final bytes = utf8.encode(text);
final blob = html.Blob([bytes]);
final url = html.Url.createObjectUrlFromBlob(blob);
final anchor = html.document.createElement('a') as html.AnchorElement
  ..href = url
  ..style.display = 'none'
  ..download = 'some_name.txt';
html.document.body.children.add(anchor);

// download
anchor.click();

// cleanup
html.document.body.children.remove(anchor);
html.Url.revokeObjectUrl(url);

여기 입니다 DartPad데모.


감사! 약간 해키 느낌이지만 작동합니다. 불행히도 Chrome에서 "다른 이름으로 저장"대화 상자가 표시되지 않고 파일 다운로드가 시작됩니다. 그리고 "다운로드하기 전에 각 파일을 저장할 위치를 묻습니다"설정이 켜져 있습니다.
Oleksii Shliama

@OleksiiShliama FileSaver.js 라이브러리를 살펴보면 실제로 Spatz와 동일한 작업을 수행합니다. 여기를 확인 하십시오 . 또한 다른 이름으로 저장 대화 상자가 크롬으로 나타납니다. 버전 문제 일 수 있습니까?
Abhilash Chandran

8

FileSaver 라는 인기있는 JS 라이브러리를 통해 다른 방법을 사용하십시오.

먼저 ProjectFolder/web/index.html라이브러리를 포함하도록 파일을 업데이트 하고 다음 webSaveAs과 같이 함수를 정의하십시오 .

...

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"> 
</script>

<script>
function webSaveAs(blob, name) {
  saveAs(blob, name);
}
</script>

<script src="main.dart.js" type="application/javascript"></script>

...

그런 다음 다트 코드에서이 함수를 다음과 같이 호출 할 수 있습니다.

import 'dart:js' as js;
import 'dart:html' as html;

...

js.context.callMethod("webSaveAs", [html.Blob([bytes], "test.txt"])

0

이 솔루션은 FileSaver.js 라이브러리를 사용하며 "saveAs"대화창을 열어야합니다.

의도 한대로 작동하기를 바랍니다.

import 'dart:js' as js;
import 'dart:html' as html;

...

final text = 'this is the text file';
final bytes = utf8.encode(text);

final script = html.document.createElement('script') as html.ScriptElement;
script.src = "http://cdn.jsdelivr.net/g/filesaver.js";

html.document.body.nodes.add(script);

// calls the "saveAs" method from the FileSaver.js libray
js.context.callMethod("saveAs", [
  html.Blob([bytes]),
  "testText.txt",            //File Name (optional) defaults to "download"
  "text/plain;charset=utf-8" //File Type (optional)
]);

 // cleanup
 html.document.body.nodes.remove(script);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.