Flutter Webアプリケーションでテキストファイルを保存およびダウンロードする方法

9

私はFlutterを初めて使用し、flutter Webアプリケーションで作業しています。私の要件は、テキストファイルを作成してダウンロードすることです。以下のように。

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

誰かがこれを達成するのを手伝ってくれる？

flutter dart flutter-web

— チンヌ
ソース

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が行ったのとまったく同じことが行われます:)。こちらをチェックしてください。また、名前を付けて保存ダイアログがChromeで表示されます。バージョンの問題である可能性があります。

— 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>

...

次に、この関数をDartコードから次のように呼び出すことができます。

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);

— セイフカロイ
ソース