Flutter WEBダウンロードオプション


12

ユーザーデータからファイルを生成する必要があるフラッターWebアプリを作成しています。そして、出力ファイルをダウンロードするオプションがあります。

しかし、フラッターウェブで機能するオプション/パッケージを見つけることができません:(

誰かが私を助けてくれますか?


どのようなデータをCSV、PDFなどにダウンロードしますか?
Deniz Bayar

私が抱えているもう1つの問題は、FlutterとWebアプリに単一のコードベースを使用していることです。Flutterでコンパイルしようとすると、dart:html以下の回答にあるプラグインは好ましくありません。
Suragch

これはあなたのケース@スラッグに役立ちますか?
Tiago Martins Peres李大仁

1
@TiagoMartinsPeres、私はFirebaseを使用していませんが、回答のリンクのソースコードは興味深いものでした。ありがとうございました。より簡単な解決策を望んでいましたが、Flutter Webはまだベータ版です。うまくいけば、より簡単なクロスプラットフォームソリューションが将来提供されるでしょう。
Suragch

回答:


3

良い回避策は、ホストされているファイルを新しいタブで開くことです

import 'dart:html' as html;

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

私のユースケースによく適合します。


これはAPKファイルのダウンロードに使用できます。オーディオファイルは自動的に再生を開始するため、オーディオファイルのダウンロードには機能しません。
Suragch

はい、私も.jsonファイルをダウンロードしようとしていますが、それもChromeタブで開かれます。HTML5で「ダウンロード」タグを使用する方法があるかどうかを確認しようとしています。
エラディカトーレ

2

ダウンロードURLにリダイレクトするための簡単なコード

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

1
この回答はバウンティ期間の後半に届いたため、バウンティの期限が切れる前に試す時間はありません。しかし、私はそれが機能すると仮定します(ただし、自動的に再生するだけでなく、オーディオファイルをダウンロードすることを確認できますか?)。わかりやすいので選びました。
Suragch

これは特にフラッターウェブ用です。モバイルアプリに代わるものはありますか?
Razi Kallayi

Androidでは、URLからファイルをダウンロードし、IOライブラリを使用して携帯電話のストレージに保存できます。
vishwajit76

1

ダウンロードをトリガーする1つの方法は、「ネイティブ」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();
}

いいね。ネイティブJavaScriptで使用されるパターンについては何も知りません。そのため、これについて詳しく調べます。
Suragch


これですごい時間を節約できました。どうもありがとうございます。このコードは、Flutterで生成したPDFファイルを即座にダウンロードできます。
nipunasudha

0

バウンティへの対応:

オーディオファイルの場合、ダウンロードするのではなく、再生を開始します

ビデオでも同じことができましたが、オーディオでも動作するはずです。生成されたオーディオは配列またはブロブだと思います

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

オーディオファイルがurlの場合はどうなりますhttp://www.example.com/my_audio.mp3か?
スラグ

0

url_launcher_webでurl_launcherパッケージを使用できます

その後、あなたは行うことができます:

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

編集:これを行うとプラグインは必要ありません

download.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');
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.