Flutter web uygulamasında metin dosyası nasıl kaydedilir ve indirilir


9

Flutter'da yeniyim ve bir flutter web uygulamasında çalışıyorum, Benim gereksinimim bir metin dosyası oluşturmak ve indirmek. aşağıdaki gibi.

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

Herkes bunu başarmama yardımcı olabilir mi?

Yanıtlar:


12

Bu yöntem, bir HTMLbelgeyle yapılan manipülasyonlara dayanır . Bazı ek paketler içe aktarılmalıdır:

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

Kod snippet'i:

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

İşte bir DartPaddemo.


Teşekkürler! Biraz acayip geliyor ama işe yarıyor. Ne yazık ki, Chrome'da "Farklı Kaydet" iletişim kutusunu almıyorum, sadece bir dosya indirmeye başlıyor. "İndirmeden önce her dosyanın nereye kaydedileceğini sorun" ayarını AÇIK duruma getirdim.
Oleksii Shliama

@OleksiiShliama FileSaver.js kitaplığına bakarsanız, aslında Spatz'ın yaptığıyla aynı şeyi yapıyor :). kontrol buraya . Ayrıca krom olarak benim için farklı kaydet iletişim kutusu görünür. Bir sürüm sorunu olabilir ..?
Abhilash Chandran

8

FileSaver adlı popüler JS kütüphanesi ile bunu yapmanın başka bir yolu var

İlk olarak, ProjectFolder/web/index.htmldosyanızı kitaplığı içerecek şekilde güncelleyin ve webSaveAsişlevi şu şekilde tanımlayın :

...

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

...

Sonra bu işlevi Dart kodundan şöyle çağırabilirsiniz:

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

...

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

0

Bu çözüm FileSaver.js kitaplığını kullanır ve "saveAs" iletişim kutusunu açmalıdır.

Umarım amaçlandığı gibi çalışır:

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);
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.