How to use the dart:html library to write files?

Question

Can someone please tell me how to create a file and make it available for download via browser button?

I have read about FileWriter but not found any proper example how to use it

and I found a post How to use the dart:html library to write html files?

but the answer just refers to html5lib which just answers how to parse a String to HTML but not how to save as a file.

help appreciated. Am I missing something or there is no example for that usecase??

Answer 1

Personally, I use a combination of Blob, Url.createObjectUrlFromBlob And AnchorElement (with download and href properties) to create a downloadable file.

Very simple example:

// Assuming your HTML has an empty anchor with ID 'myLink'
var link = querySelector('a#myLink') as AnchorElement;
var myData = [ "Line 1\n", "Line 2\n", "Line 3\n"];
// Plain text type, 'native' line endings
var blob = new Blob(myData, 'text/plain', 'native');
link.download = "file-name-to-save.txt";
link.href = Url.createObjectUrlFromBlob(blob).toString();
link.text = "Download Now!";

Answer 2

As alluded to by Günter Zöchbauer's comment, an alternative to using Blobs is to base64-encode the data and generate a data URL yourself (at least for file sizes that are well within the data URL limits of most browsers). For example:

import 'dart:html';

Uint8List generateFileContents() { ... }

void main() {
  var bytes = generateFileContents();
  (querySelector('#download-link') as AnchorElement)
    ..text = 'Download File'
    ..href = UriData.fromBytes(bytes).toString()
    ..download = 'filename';
}

Also note that if you do want to use a Blob and want to write binary data from a Uint8List, you are expected to use Blob([bytes], ...) and not Blob(bytes, ...). For example:

  var bytes = generateFileContents();
  var blob = Blob([bytes], 'application/octet-stream');
  (querySelector('#download-link') as AnchorElement)
    ..text = 'Download File'
    ..href = Url.createObjectUrlFromBlob(blob)
    ..download = 'filename';