How to save and download text file in Flutter web application

Question

I am new to Flutter and working in a flutter web application, My requirement is to create and download a text file. like below.

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

Can anyone help me to achieve this

Answer 1

This method is based on manipulations with an HTML document. Some additional packages should be imported:

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

Code snippet:

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

Here is DartPad demo.

Answer 2

Got another way to do it, via popular JS library called FileSaver

First, update your ProjectFolder/web/index.html file to include the library and define the webSaveAs function like so:

...

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

...

Then you can call this function from Dart code like so:

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

...

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

Answer 3

If you are looking to simply save a text file, this method is more straight forward than having to deal with all those conversions:

import 'dart:convert' show utf8;

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' show AnchorElement;

void saveTextFile(String text, String filename) {
  AnchorElement()
    ..href = '${Uri.dataFromString(text, mimeType: 'text/plain', encoding: utf8)}'
    ..download = filename
    ..style.display = 'none'
    ..click();
}

You can change the mimeType and encoding as you see fit. For instance, I had to generate CSV files in a recent project, so I used mimeType: 'text/csv'.

Answer 4

This solution uses FileSaver.js library and it should open the "saveAs" dialog.

I hope it works as intended:

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

Answer 5

I stumbled upon this and hardly found anything but this worked for me as of the latest flutter version 2.5.0.

you have to add this script in the body of your web/index.html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script> 

and then just use this method to download any type of file

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

void save(Object bytes, String fileName) {
  js.context.callMethod("saveAs", <Object>[
    html.Blob(<Object>[bytes]),
    fileName
  ]);
}

e.g I wanted to download a JSON response from the server so I called it like this.

save(json.encode(response.data), 'file.json');

With this method you can almost download any type of file, I did use this method to download images and JSON files and it is pretty straightforward.