flutter - Flutter WEB 下载选项

Question

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

但我找不到任何适用于颤振网络的选项/包:(

有人可以帮我吗？

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

您可以将包 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 4

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

import 'dart:html' as html;

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

非常适合我的用例。

Answer 5

我找到了一个解决方案，可以让我发出授权请求以获取文件（带有 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 6

对赏金的回应：

音频文件的情况，它只是开始播放而不是下载它

我对视频做了同样的事情，但我相信它也适用于音频。我假设，您生成的音频是一个数组或 blob

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

    const mimeType = 'audio/wav'; // TODO: Pick a right format

    void downloadFile(List chunks) async {
        final blob = HTML.Blob(chunks, mimeType);
        final objectUrl = await HTML.Url.createObjectUrlFromBlob(blob);
        final a = HTML.AnchorElement();
        a.href = item.url;
        a.download = "my_audio_file_${DateTime.now()}.wav";
        HTML.document.body.append(a);
        a.click();
        // Wait for click event to be processed and cleanup
        await Future.delayed(Duration(milliseconds: 100));
        a.remove();
        HTML.Url.revokeObjectUrl(item.videoObjectUrl);
    }

Answer 7

你也可以使用dio 插件，它支持这种开箱即用的东西。所以你可以这样做：

response = await dio.download('url-to-downloadable', 'path-to-save-to');

这是他们的 API 文档。