Flutter WEB варіант завантаження


12

Я роблю мерехтливий веб-додаток, який повинен генерувати файл із даних користувачів. І є можливість завантажити вихідний файл.

Але я не можу знайти жодних параметрів / пакетів, які працюють для мерехтіння веб :(

Може хтось, будь ласка, допоможе мені?


Які дані потрібно завантажити CSV, Pdf тощо?
Деніз Баяр

Ще одна проблема, яка у мене виникає, - це використання єдиної бази коду для програми Flutter and Web. Спроба скомпілювати його на Flutter не подобається dart:htmlплагінам, які мають відповіді нижче.
Сурагч

Чи корисно це для вашої справи @Suragch?
Tiago Martins Peres

1
@TiagoMartinsPeres, Хоча я не використовую Firebase, вихідний код у посиланні відповіді був цікавим. Дякую. Я сподівався на більш просте рішення, але Flutter Web все ще знаходиться в бета-версії. Сподіваємось, в майбутньому будуть запропоновані більш легкі кросплатформні рішення.
Сурагч

Відповіді:


3

Хорошим рішенням є відкриття розміщеного файлу на новій вкладці за допомогою

import 'dart:html' as html;

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

Добре підходить для мого використання.


Це працює для завантаження файлу APK. Завантаження аудіофайлу не працює, оскільки аудіофайл починає відтворюватися автоматично.
Сурагч

Так, я також намагаюся завантажити .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
Оскільки ця відповідь надійшла пізно в період щедрості, я не встигаю спробувати її до закінчення терміну щедрості. Однак я припускаю, що він працює (але чи можете ви підтвердити, що він завантажував би аудіофайл, не відтворюючи його автоматично?). Я вибираю цю відповідь, тому що її легко зрозуміти.
Сурагч

Це спеціально для мерехтіння веб. Чи є альтернатива для мобільного додатка?
Разі Каллай

В Android ви можете завантажити файл з URL-адреси та зберегти його у сховищі телефону за допомогою бібліотеки IO.
vishwajit76

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, тому я детальніше розбираюся в цьому.
Сурагч


Ого, цей мене врятував ВЕЛИКИЙ ЧАС! Дуже дякую. Цей код міг миттєво завантажити PDF-файл, який я створив у Flutter.
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 з url_launcher_web

тоді ви можете зробити:

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

EDIT: плагін вам не потрібен

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');
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.