फ़्लटर वेब एप्लिकेशन में टेक्स्ट फ़ाइल को कैसे सहेजना और डाउनलोड करना है

Question

मैं स्पंदन के लिए नया हूं और एक स्पंदन वेब अनुप्रयोग में काम कर रहा हूं, मेरी आवश्यकता एक टेक्स्ट फ़ाइल बनाने और डाउनलोड करने की है। नीचे की तरह।

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

क्या कोई मुझे इसे हासिल करने में मदद कर सकता है

Answer 1

यह विधि एक 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डेमो।

Comments

धन्यवाद! यह थोड़ा हैकिंग लगता है लेकिन यह काम करता है। दुर्भाग्य से, मुझे Chrome में "इस रूप में सहेजें" संवाद नहीं मिला है, यह बस एक फ़ाइल डाउनलोड करना शुरू करता है। और मेरे पास "पूछें कि डाउनलोड करने से पहले प्रत्येक फ़ाइल को कहाँ सहेजना है" सेटिंग चालू हो गई।

— ओलेक्सी शालीमा

@OleksiiShliama यदि आप FileSaver.js पुस्तकालय में देखते हैं, तो वास्तव में वही काम कर रहा है जो Spatz ने किया है :)। जाँच यहां । क्रोम में मेरे लिए डायलॉग के रूप में सेव भी दिखाई देता है। एक संस्करण मुद्दा हो सकता है ..?

— अभिलाष चंद्रन

Answer 2

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"])

Answer 3

यह समाधान FileSaver.js लाइब्रेरी का उपयोग करता है और इसे "सेवएज़" डायलॉग खोलना चाहिए।

मुझे उम्मीद है कि यह इरादा के अनुसार काम करता है:

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