Flutter WEB 下载选项

Question

我正在制作应该从用户数据生成文件的 flutter web 应用程序。并且可以选择下载输出文件。

但是我找不到任何适用于 flutter web 的选项/包:(

有人可以帮我吗？

Answer 1

重定向到下载 URL 的简单代码

import 'dart:html' as html;
void downloadFile(String url){
   html.AnchorElement anchorElement =  new html.AnchorElement(href: url);
   anchorElement.download = url;
   anchorElement.click();
}

Answer 2

触发下载的一种方法是适应“原生”javascript 中使用的常见模式，创建具有download属性的锚元素并触发点击。

import 'dart:convert';
import 'dart:html';

main() {
  File file = // generated somewhere
  final rawData = file.readAsBytesSync();
  final content = base64Encode(rawData);
  final anchor = AnchorElement(
      href: "data:application/octet-stream;charset=utf-16le;base64,$content")
    ..setAttribute("download", "file.txt")
    ..click();
}

Answer 3

我找到了一个解决方案，可以让我发出授权请求来获取文件（带有包 http.dart），然后使用 flutter web（带有包 dart:html）下载该文件。我不知道其他人是否需要这个，但我无法找到解决方案，所以这里是代码。

import 'package:http/http.dart';
import 'dart:html' as html;

...

var headers = {
   'Content-Type': 'application/octet-stream',
   'Accept': 'application/octet-stream',
   'Authorization' : 'Bearer [TOKEN HERE]'
};

Response res =
      await get(url, headers: headers); 

if (res.statusCode == 200) {
    final blob = html.Blob([res.bodyBytes]);
    final url = html.Url.createObjectUrlFromBlob(blob);
    final anchor = html.document.createElement('a') as html.AnchorElement
      ..href = url
      ..style.display = 'none'
      ..download = filename;
    html.document.body.children.add(anchor);

    anchor.click();

    html.document.body.children.remove(anchor);
    html.Url.revokeObjectUrl(url);
}

Answer 4

您可以将 url_launcher 包与url_launcher_web一起使用

那么你可以这样做：

launch("data:application/octet-stream;base64,${base64Encode(yourFileBytes)}")

编辑：如果你这样做，你不需要插件

下载.dart：

import 'dart:convert';
// ignore: avoid_web_libraries_in_flutter
import 'dart:html';

void download(
  List<int> bytes, {
  String downloadName,
}) {
  // Encode our file in base64
  final _base64 = base64Encode(bytes);
  // Create the link with the file
  final anchor =
      AnchorElement(href: 'data:application/octet-stream;base64,$_base64')
        ..target = 'blank';
  // add the name
  if (downloadName != null) {
    anchor.download = downloadName;
  }
  // trigger download
  document.body.append(anchor);
  anchor.click();
  anchor.remove();
  return;
}

empty_download.dart:

void download(
  List<int> bytes, {
  String downloadName,
}) {
  print('I do nothing');
}

导入和使用：

import 'empty_download.dart'
if (dart.library.html) 'download.dart';

void main () {
  download('I am a test file'.codeUnits, // takes bytes
      downloadName: 'test.txt');
}

Answer 5

一个好的解决方法是使用以下命令在新选项卡中打开托管文件

import 'dart:html' as html;

openInANewTab(url){
  html.window.open(url, 'PlaceholderName');
}

非常适合我的用例。