Opcja pobierania Flutter WEB


12

Tworzę trzepotliwą aplikację internetową, która powinna generować plik z danych użytkownika. I masz opcję pobrania pliku wyjściowego.

Ale nie mogę znaleźć żadnych opcji / pakietów, które działałyby na flutter web :(

Czy ktoś mógłby mi pomóc?


Jakie dane chcesz pobrać CSV, PDF itp.?
Deniz Bayar

Innym problemem, jaki mam, jest używanie jednej bazy kodu dla aplikacji Flutter i Web. Próba skompilowania go na Flutter nie lubi dart:htmlwtyczek, które zawierają poniższe odpowiedzi.
Suragch

Czy to pomaga w twojej sprawie @Suragch?
Tiago Martins Peres 李大仁

1
@TiagoMartinsPeres, Chociaż nie używam Firebase, kod źródłowy w linku odpowiedzi był interesujący. Dziękuję Ci. Miałem nadzieję na prostsze rozwiązanie, ale Flutter Web wciąż jest w fazie beta. Mamy nadzieję, że w przyszłości będą dostępne łatwiejsze rozwiązania międzyplatformowe.
Suragch

Odpowiedzi:


3

Dobrym rozwiązaniem jest otwarcie hostowanego pliku w nowej karcie za pomocą

import 'dart:html' as html;

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

Dobrze pasuje do mojego przypadku użycia.


Działa to w przypadku pobierania pliku APK. Nie działa przy pobieraniu pliku audio, ponieważ plik audio zaczyna się automatycznie odtwarzać.
Suragch

Tak, próbuję również pobrać plik .json, który również otwiera się na karcie chrome. Próbuję sprawdzić, czy istnieje sposób na użycie tagu „pobierz” w HTML5.
Eradicatore

2

Prosty kod do przekierowania do pobrania adresu URL

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

1
Ponieważ ta odpowiedź nadeszła późno w okresie nagród, nie mam czasu, aby wypróbować ją przed wygaśnięciem nagrody. Zakładam jednak, że to działa (ale czy możesz potwierdzić, że pobrałby plik audio bez automatycznego odtwarzania?). Wybieram tę odpowiedź, ponieważ jest łatwa do zrozumienia.
Suragch

Dotyczy to w szczególności trzepotania wstęgi. Czy jest jakaś alternatywa dla aplikacji mobilnej?
Razi Kallayi

W Androidzie możesz pobrać plik z adresu URL i zapisać go w pamięci telefonu za pomocą biblioteki IO.
vishwajit76

1

Jednym ze sposobów wyzwalania pobierania jest dostosowanie wspólnego wzorca używanego w „rodzimym” javascript, utworzenie elementu kotwicy z downloadatrybutem i wywołanie kliknięcia.

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

Miły. Nic nie wiem o wzorcach używanych w natywnym języku JavaScript, więc przyjrzę się temu.
Suragch


Wow, ten oszczędził mi DUŻY CZAS! Dziękuję bardzo. Ten kod może natychmiast pobrać plik pdf wygenerowany w Flutter.
nipunasudha

0

Odpowiedź na nagrodę:

w przypadku pliku audio po prostu zaczyna się odtwarzanie, a nie pobieranie

Zrobiłem to samo z wideo, ale jestem pewien, że będzie również działać z dźwiękiem. Zakładam, że wygenerowany dźwięk to tablica lub obiekt 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);
    }

Co jeśli plik audio to URL http://www.example.com/my_audio.mp3?
Suragch

0

możesz użyć pakietu url_launcher z url_launcher_web

wtedy możesz zrobić:

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

EDYCJA: nie potrzebujesz wtyczki, jeśli to zrobisz

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 i użycie:

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

void main () {
  download('I am a test file'.codeUnits, // takes bytes
      downloadName: 'test.txt');
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.