Flutter WEB Download-Option

12

Ich mache eine flatternde Web-App, die eine Datei aus Benutzerdaten generieren soll. Und haben Sie die Möglichkeit, die Ausgabedatei herunterzuladen.

Aber ich kann keine Optionen / Pakete finden, die für Flatter Web funktionieren :(

Kann mir bitte jemand helfen?

— Pratik
quelle

Welche Art von Daten möchten Sie CSV, Pdf usw. herunterladen?

— Deniz Bayar

Ein weiteres Problem ist die Verwendung einer einzigen Codebasis für die Flutter- und Web-App. Der Versuch, es auf Flutter zu kompilieren, mag die dart:htmlPlugins in den folgenden Antworten nicht.

— Suragch

Ist das hilfreich für Ihren Fall @Suragch?

— Tiago Martins Peres 10

1

@TiagoMartinsPeres, Obwohl ich Firebase nicht verwende, war der Quellcode im Link der Antwort interessant. Vielen Dank. Ich hatte auf eine einfachere Lösung gehofft, aber Flutter Web befindet sich noch in der Beta. Hoffentlich werden in Zukunft einfachere plattformübergreifende Lösungen angeboten.

— Suragch

3

Eine gute Problemumgehung besteht darin, die gehostete Datei in einem neuen Tab mit zu öffnen

import 'dart:html' as html;

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

Passt gut zu meinem Anwendungsfall.

— Shashwat Aditya
quelle

Dies funktioniert zum Herunterladen einer APK-Datei. Das Herunterladen einer Audiodatei funktioniert nicht, da die Audiodatei automatisch abgespielt wird.

— Suragch

Ja, ich versuche auch, eine .json-Datei herunterzuladen, die ebenfalls über die Registerkarte "Chrome" geöffnet wird. Ich versuche zu sehen, ob es eine Möglichkeit gibt, das "Download" -Tag in HTML5 zu verwenden.

— Eradicatore

2

Einfacher Code zum Umleiten zum Herunterladen der URL

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

— vishwajit76
quelle

1

Da diese Antwort spät in der Kopfgeldperiode kam, habe ich keine Zeit, sie zu versuchen, bevor das Kopfgeld abläuft. Ich gehe jedoch davon aus, dass es funktioniert (aber können Sie bestätigen, dass eine Audiodatei heruntergeladen wird, ohne sie nur automatisch abzuspielen?). Ich wähle diese Antwort, weil sie leicht zu verstehen ist.

— Suragch

Dies ist speziell für Flatterbahn. Gibt es eine Alternative für die mobile App?

— Razi Kallayi

In Android können Sie Dateien von der URL herunterladen und mithilfe der E / A-Bibliothek auf Ihrem Telefonspeicher speichern.

— vishwajit76

1

Eine Möglichkeit, den Download auszulösen, besteht darin, ein allgemeines Muster anzupassen, das in "nativem" Javascript verwendet wird, ein Ankerelement mit dem downloadAttribut zu erstellen und einen Klick auszulösen.

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

— DaGardner
quelle

Nett. Ich weiß nichts über Muster, die in nativem Javascript verwendet werden, daher werde ich mich näher damit befassen.

— Suragch

stackoverflow.com/a/3665147/3941291

— DaGardner

Wow, das hat mir GROSSE ZEIT gerettet! Ich danke dir sehr. Dieser Code könnte sofort eine PDF-Datei herunterladen, die ich in Flutter generiert habe.

— Nipunasudha

0

Antwort auf Kopfgeld:

Bei einer Audiodatei wird sie nur abgespielt, anstatt sie herunterzuladen

Ich habe dasselbe mit Video gemacht, aber ich bin sicher, dass es auch mit Audio funktionieren wird. Ich gehe davon aus, dass Ihr generiertes Audio ein Array oder ein Blob ist

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

— Dima Rostopira
quelle

Was ist, wenn die Audiodatei URL ist http://www.example.com/my_audio.mp3?

— Suragch

0

Sie können das Paket url_launcher mit url_launcher_web verwenden

dann können Sie tun:

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

EDIT: Sie benötigen kein Plugin, wenn Sie dies tun

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 und Verwendung:

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

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

— pinguinitorawr
quelle