Speichern und Herunterladen von Textdateien in der Flutter-Webanwendung

9

Ich bin neu bei Flutter und arbeite in einer Flatter-Webanwendung. Meine Anforderung besteht darin, eine Textdatei zu erstellen und herunterzuladen. Wie unten.

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

Kann mir jemand helfen, dies zu erreichen

flutter dart flutter-web Chinnu
quelle

Antworten:

12

Diese Methode basiert auf Manipulationen mit einem HTMLDokument. Einige zusätzliche Pakete sollten importiert werden:

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

Code-Auszug:

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

Hier ist eine DartPadDemo.

Spatz
quelle
Vielen Dank! Es fühlt sich ein bisschen hackig an, aber es funktioniert. Leider wird in Chrome nicht das Dialogfeld "Speichern unter" angezeigt, sondern nur das Herunterladen einer Datei. Und ich habe die Einstellung "Fragen, wo jede Datei vor dem Herunterladen gespeichert werden soll" aktiviert.
Oleksii Shliama
@OleksiiShliama Wenn Sie in die FileSaver.js-Bibliothek schauen, macht es genau das, was Spatz getan hat :). Überprüfen Sie hier . Auch der Dialog Speichern unter erscheint für mich in Chrom. Könnte ein Versionsproblem sein ..?
Abhilash Chandran
8

Ich habe eine andere Möglichkeit, dies zu tun, über die beliebte JS-Bibliothek FileSaver

Aktualisieren Sie zunächst Ihre ProjectFolder/web/index.htmlDatei, um die Bibliothek einzuschließen, und definieren Sie die webSaveAsFunktion folgendermaßen:

...

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

...

Dann können Sie diese Funktion aus dem Dart-Code wie folgt aufrufen:

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

...

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

Diese Lösung verwendet die FileSaver.js-Bibliothek und sollte das Dialogfeld "saveAs" öffnen.

Ich hoffe es funktioniert wie vorgesehen:

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);
Seif Karoui
quelle