Cara menyimpan dan mengunduh file teks dalam aplikasi web Flutter

9

Saya baru mengenal Flutter dan bekerja di aplikasi web flutter, Persyaratan saya adalah membuat dan mengunduh file teks. seperti di bawah ini.

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

Adakah yang bisa membantu saya untuk mencapai ini

flutter dart flutter-web Chinnu
sumber

Jawaban:

12

Metode ini didasarkan pada manipulasi dengan HTMLdokumen. Beberapa paket tambahan harus diimpor:

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

Cuplikan kode:

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

Berikut adalah DartPaddemo.

Spatz
sumber
Terima kasih! Rasanya agak berantakan tapi berhasil. Sayangnya, saya tidak mendapatkan dialog "Simpan Sebagai" di Chrome, itu hanya mulai mengunduh file. Dan saya memiliki "Tanya tempat menyimpan setiap file sebelum mengunduh" pengaturan AKTIF.
Oleksii Shliama
@OleksiiShliama Jika Anda melihat perpustakaan FileSaver.js sebenarnya melakukan hal yang persis sama dengan apa yang telah dilakukan Spatz :). periksa di sini . Dialog save as juga muncul untuk saya di chrome. Bisa jadi masalah versi ..?
Abhilash Chandran
8

Dapatkan cara lain untuk melakukannya, melalui perpustakaan JS populer yang disebut FileSaver

Pertama, perbarui ProjectFolder/web/index.htmlfile Anda untuk memasukkan pustaka dan mendefinisikan webSaveAsfungsi seperti:

...

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

...

Kemudian Anda dapat memanggil fungsi ini dari kode Dart seperti:

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

...

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

Solusi ini menggunakan perpustakaan FileSaver.js dan harus membuka dialog "saveAs".

Saya berharap ini berfungsi sebagaimana dimaksud:

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
sumber