ตัวเลือกการดาวน์โหลดเว็บกระพือ


12

ฉันกำลังสร้างเว็บแอพพลิเคชั่นที่ควรสร้างไฟล์จากข้อมูลผู้ใช้ และมีตัวเลือกในการดาวน์โหลดไฟล์ที่ส่งออก

แต่ฉันไม่สามารถหาตัวเลือก / แพ็คเกจใด ๆ ที่ใช้งานได้กับเว็บกระพือ :(

มีคนช่วยฉันออกได้ไหม


ข้อมูลประเภทใดที่คุณต้องการดาวน์โหลด CSV, Pdf และอื่น ๆ
Deniz Bayar

ปัญหาอีกประการหนึ่งที่ฉันมีคือการใช้รหัสฐานเดียวสำหรับแอพ Flutter และเว็บ พยายามรวบรวมบน Flutter ไม่ชอบdart:htmlปลั๊กอินที่คำตอบด้านล่างมี
Suragch

คือนี้เป็นประโยชน์กับกรณีของคุณ @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 หรือไม่
Eradicatore

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

วิธีหนึ่งในการทริกเกอร์การดาวน์โหลดคือการปรับรูปแบบทั่วไปที่ใช้ในจาวาสคริปต์ "ดั้งเดิม" สร้างองค์ประกอบจุดยึดด้วย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();
}

ดี ฉันไม่รู้อะไรเกี่ยวกับรูปแบบที่ใช้ในจาวาสคริปต์ดั้งเดิมดังนั้นฉันจะดูเพิ่มเติมในสิ่งนี้
Suragch


ว้าวอันนี้ช่วยฉันได้ครั้งใหญ่! ขอบคุณมาก. รหัสนี้สามารถดาวน์โหลดไฟล์ 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อะไร?
Suragch

0

คุณสามารถใช้แพ็คเกจ url_launcher กับurl_launcher_web

จากนั้นคุณสามารถทำได้:

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.