Opción de descarga de Flutter WEB

12

Estoy creando una aplicación web de flutter que debería generar un archivo a partir de los datos del usuario. Y tiene la opción de descargar el archivo de salida.

Pero no puedo encontrar ninguna opción / paquete que funcione para flutter web :(

¿Puede alguien ayudarme?

— Pratik
fuente

¿Qué tipo de datos desea descargar CSV, Pdf, etc.?

— Deniz Bayar

Otro problema que tengo es usar una base de código único para la aplicación Flutter and Web. Intentar compilarlo en Flutter no le gustan los dart:htmlcomplementos que tienen las respuestas a continuación.

— Suragch

¿Es esta útil para su caso @Suragch?

— Tiago Martins Peres 李大仁

1

@TiagoMartinsPeres, aunque no estoy usando Firebase, el código fuente en el enlace de la respuesta fue interesante. Gracias. Esperaba una solución más simple, pero Flutter Web todavía está en versión beta. Esperemos que en el futuro se proporcionen soluciones multiplataforma más fáciles.

— Suragch

3

Una buena solución es abrir el archivo alojado en una nueva pestaña usando

import 'dart:html' as html;

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

Se adapta bien para mi caso de uso.

— Shashwat Aditya
fuente

Esto funciona para descargar un archivo APK. No funciona para descargar un archivo de audio porque el archivo de audio comienza a reproducirse automáticamente.

— Suragch

Sí, también estoy tratando de descargar un archivo .json y la pestaña de Chrome también lo abre. Intentando ver si hay alguna forma de usar la etiqueta "descargar" en html5.

— Eradicatore

2

Código simple para redirigir para descargar URL

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

— vishwajit76
fuente

1

Como esta respuesta llegó tarde en el período de recompensa, no tengo tiempo para probarla antes de que expire la recompensa. Sin embargo, supondré que funciona (pero ¿puedes confirmar que descargaría un archivo de audio sin solo reproducirlo automáticamente?). Elijo esta respuesta porque es fácil de entender.

— Suragch

Esto es específicamente para flutter web. ¿Hay alguna alternativa para la aplicación móvil?

— Razi Kallayi

En Android, puede descargar el archivo de la url y guardarlo en el almacenamiento de su teléfono usando la biblioteca IO.

— vishwajit76

1

Una forma de activar la descarga es adaptar un patrón común utilizado en javascript "nativo", crear un elemento de anclaje con el downloadatributo y activar un clic.

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
fuente

Agradable. No sé nada sobre los patrones utilizados en JavaScript nativo, por lo que analizaré más sobre esto.

— Suragch

stackoverflow.com/a/3665147/3941291

— DaGardner

¡Wow, este me salvó MUCHO TIEMPO! Muchas gracias. Este código podría descargar instantáneamente un archivo pdf que generé en Flutter.

— nipunasudha

0

Respuesta a la recompensa:

en el caso de un archivo de audio, simplemente comienza a reproducirse en lugar de descargarlo

He hecho lo mismo con el video, pero estoy seguro de que también funcionará con el audio. Supongo que tu audio generado es una matriz o 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);
    }

— Dima Rostopira
fuente

¿Qué pasa si el archivo de audio es url http://www.example.com/my_audio.mp3?

— Suragch

0

puedes usar el paquete url_launcher con url_launcher_web

entonces puedes hacer:

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

EDITAR: no necesita un complemento si hace esto

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

importar y usar:

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
fuente