我是 Flutter 的新手，在 Flutter Web 应用程序中工作，我的要求是创建和下载一个文本文件。如下所示。
void getData() {
List<int> bytes = utf8.encode('this is the text file');
print(bytes); // Need to download this with txt file.
}
谁能帮我实现这个目标
【问题讨论】：
标签： flutter dart flutter-web
此方法基于对HTML 文档的操作。
应该导入一些额外的包：
import 'dart:convert';
import 'dart:html' as html; // or package:universal_html/prefer_universal/html.dart
代码sn-p：
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 是DartPad 演示。
【讨论】：
还有另一种方法，通过称为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>
...
然后你可以像这样从 Dart 代码中调用这个函数：
import 'dart:js' as js;
import 'dart:html' as html;
...
js.context.callMethod("webSaveAs", [html.Blob([bytes], "test.txt"])
【讨论】：
如果您只想保存一个文本文件，这种方法比处理所有这些转换更直接：
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();
}
您可以根据需要更改 mimeType 和编码。比如我最近一个项目要生成CSV文件，所以我用mimeType: 'text/csv'。
【讨论】：
此解决方案使用 FileSaver.js 库，它应该打开“saveAs”对话框。
我希望它能按预期工作：
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);
【讨论】：
我偶然发现了这一点，几乎没有发现任何东西，但从最新的颤振版本 2.5.0 开始，这对我有用。
您必须将此脚本添加到您的 web/index.html 文件的正文中
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script>
然后只需使用此方法下载任何类型的文件
void save(Object bytes, String fileName) {
js.context.callMethod("saveAs", <Object>[
html.Blob(<Object>[bytes]),
fileName
]);
}
例如，我想从服务器下载 JSON 响应，所以我这样称呼它。
save(json.encode(response.data), 'file.json');
使用这种方法几乎可以下载任何类型的文件，我确实使用这种方法下载图像和 JSON 文件，非常简单。
【讨论】：