Menggunakan HTML5 / JavaScript untuk menghasilkan dan menyimpan file


317

Saya telah mengutak-atik WebGL akhir-akhir ini, dan membuat pembaca Collada berfungsi. Masalahnya, ini sangat lambat (Collada adalah format yang sangat verbose), jadi saya akan mulai mengonversi file ke format yang lebih mudah digunakan (mungkin JSON). Saya sudah memiliki kode untuk mem-parsing file dalam JavaScript, jadi saya dapat menggunakannya sebagai eksportir saya juga! Masalahnya adalah menabung.

Sekarang, saya tahu bahwa saya dapat mem-parsing file, mengirim hasilnya ke server, dan meminta browser meminta file kembali dari server sebagai unduhan. Namun pada kenyataannya server tidak ada hubungannya dengan proses khusus ini, jadi mengapa melibatkannya? Saya sudah memiliki konten file yang diinginkan dalam memori. Apakah ada cara agar saya dapat menyajikan kepada pengguna unduhan menggunakan JavaScript murni? (Aku meragukannya, tapi mungkin juga bertanya ...)

Dan untuk lebih jelasnya: Saya tidak mencoba mengakses sistem file tanpa sepengetahuan pengguna! Pengguna akan memberikan file (mungkin melalui seret dan jatuhkan), skrip akan mengubah file dalam memori, dan pengguna akan diminta untuk mengunduh hasilnya. Semua yang harus menjadi aktivitas "aman" sejauh browser yang bersangkutan.

[EDIT]: Saya tidak menyebutkannya di muka, jadi poster yang menjawab "Flash" cukup valid, tetapi bagian dari apa yang saya lakukan adalah upaya untuk menyoroti apa yang dapat dilakukan dengan HTML5 murni ... jadi Flash adalah langsung dalam kasus saya. (Meskipun itu jawaban yang benar-benar valid untuk siapa pun yang melakukan aplikasi web "nyata".) Karena itu, sepertinya saya kurang beruntung kecuali saya ingin melibatkan server. Bagaimanapun, terima kasih!


8
Anda dapat mempertimbangkan untuk mengubah jawaban yang diterima, tampaknya ada cara HTML murni sekarang
Pekka

Jawaban:


256

OK, membuat data: URI pasti membantu saya, terima kasih kepada Matthew dan Dennkster yang menunjukkan opsi itu! Ini pada dasarnya bagaimana saya melakukannya:

1) dapatkan semua konten menjadi string yang disebut "konten" (misalnya dengan membuatnya di sana awalnya atau dengan membaca innerHTML dari tag halaman yang sudah dibangun).

2) Bangun data URI:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

Akan ada batasan panjang tergantung pada jenis browser dll, tetapi misalnya Firefox 3.6.12 berfungsi hingga setidaknya 256k. Pengkodean dalam Base64 sebagai gantinya menggunakan komponen encodeURIC mungkin membuat hal-hal lebih efisien, tetapi bagi saya itu ok.

3) buka jendela baru dan "redirect" ke URI ini meminta lokasi unduhan halaman yang dihasilkan JavaScript saya:

newWindow = window.open(uriContent, 'neuesDokument');

Itu dia.


34
Jika Anda ingin menghindari menggunakan sembulan, yang dapat diblokir, Anda dapat mengatur location.hrefke konten. location.href = uriContent.
Alex Turpin

12
Hai saya mencoba ini tetapi mengunduh file tersebut sebagai file .part. Bagaimana saya bisa mengatur filetype?
Sedat Başar

6
@ SedatBaşar Data URI tidak mendukung pengaturan nama file, Anda harus mengandalkan browser untuk mengatur ekstensi yang sesuai menggunakan tipe mime. Tetapi jika tipe mime dapat ditampilkan oleh browser, ia tidak akan mengunduhnya, tetapi akan menampilkannya. Ada beberapa cara lain untuk melakukan ini, tetapi tidak ada yang bekerja di IE <10.
panzi

7
IE tidak benar-benar mendukung data URI dan Firefox sepertinya menyimpan file dengan nama acak.
nylund

25
Saya pikir kita membuat ini lebih sulit daripada yang seharusnya. Buka konsol JS Anda di halaman ini dan taruh location.href = "data:application/octet-stream," + encodeURIComponent(jQuery('#answer-4551467 .post-text').first().text());dan itu akan menyimpan konten jawaban @ Nøk ke file. Saya tidak memiliki IE untuk mengujinya, tetapi berfungsi untuk webkit.
Bruno Bronosky

278

Solusi sederhana untuk browser siap HTML5 ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Pemakaian

download('test.txt', 'Hello world!');

2
Jika Anda tahu url sumber yang ingin Anda unduh ini adalah solusi terbaik!
sidonaldson

31
Kemampuan untuk mengatur nama file menjadikan ini sebagai pemenang.
Omn

9
Metode ini bekerja di Chrome hingga pembaruan terbaru yang saya terima beberapa hari yang lalu (35.0.1916.114 m). Sekarang ini berfungsi sebagian karena nama file dan ekstensi tidak lagi berfungsi (selalu menamai file download.txt terlepas dari apa yang diteruskan.)
Sevin7

6
Saya memiliki Chrom 42.0.2311.90, dan ini berfungsi untuk saya dengan nama file yang diharapkan.
Saurabh Kumar

4
Jika ada batasan jumlah data yang bisa dimasukkan?
Kaspar Lee

80

HTML5 mendefinisikan window.saveAs(blob, filename)metode. Itu tidak didukung oleh browser apa pun sekarang. Tapi ada perpustakaan kompatibilitas yang disebut FileSaver.js yang menambahkan fungsi ini ke sebagian besar browser modern (termasuk Internet Explorer 10+). Internet Explorer 10 mendukung navigator.msSaveBlob(blob, filename)metode ( MSDN ), yang digunakan di FileSaver.js untuk dukungan Internet Explorer.

Saya menulis posting blog dengan rincian lebih lanjut tentang masalah ini.


1
Bagaimana dengan pemblokiran popup? Perilaku perpustakaan ini serupa dengan solusi @ Nøk. Teks biasa di Firefox dibuka dengan yang baru. Hanya Chrome yang mencoba menyimpannya, tetapi ia mengubah ekstensi (saya perlu dotfile tanpa ekstensi).
ciembor

1
@emembor varian atribut unduhan (url objek +) (yang saya gunakan dengan chrome) memungkinkan Anda mengatur nama file. Ini bekerja untuk saya di chrome.
panzi

1
@ciembor aha dan popup tidak diblokir jika klik langsung menyebabkannya.
panzi

6
FileSaver.js mendukung IE sekarang
Eli Gray

15
W3C mengatakan: Pekerjaan pada dokumen ini telah dihentikan dan tidak boleh dirujuk atau digunakan sebagai dasar untuk implementasi.
WaiKit Kung

48

Menyimpan file besar

Long data URI dapat memberikan masalah kinerja di browser. Opsi lain untuk menyimpan file yang dihasilkan oleh sisi klien, adalah meletakkan kontennya di objek Blob (atau File) dan membuat tautan unduhan menggunakan URL.createObjectURL(blob). Ini mengembalikan URL yang dapat digunakan untuk mengambil konten gumpalan. Gumpalan disimpan di dalam browser hingga URL.revokeObjectURL()dipanggil pada URL atau dokumen yang membuatnya ditutup. Sebagian besar browser web memiliki dukungan untuk URL objek , Opera Mini adalah satu-satunya yang tidak mendukungnya.

Memaksa unduhan

Jika data berupa teks atau gambar, peramban dapat membuka file, alih-alih menyimpannya ke disk. Untuk menyebabkan file diunduh saat mengeklik tautan, Anda dapat menggunakan downloadatribut tersebut. Namun, tidak semua browser web memiliki dukungan untuk atribut unduhan . Pilihan lain adalah menggunakan application/octet-streamsebagai tipe mime file, tetapi ini menyebabkan file tersebut disajikan sebagai gumpalan biner yang terutama tidak ramah pengguna jika Anda tidak atau tidak dapat menentukan nama file. Lihat juga ' Paksakan untuk membuka munculan "Simpan Sebagai ..." yang terbuka di klik tautan teks untuk pdf dalam HTML '.

Menentukan nama file

Jika gumpalan dibuat dengan konstruktor File, Anda juga dapat mengatur nama file, tetapi hanya beberapa browser web (termasuk Chrome & Firefox) yang memiliki dukungan untuk konstruktor File . Nama file juga dapat ditentukan sebagai argumen untuk downloadatribut, tetapi ini tunduk pada satu ton pertimbangan keamanan . Internet Explorer 10 dan 11 menyediakan metode sendiri, msSaveBlob , untuk menentukan nama file.

Kode contoh

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;
<a id="link" target="_blank" download="file.txt">Download</a>


1
Bisakah saya menampilkan dialog (popup) untuk menentukan folder (direktori) untuk menyimpan file?
Calvin

@Calvin: Saya telah memperbarui jawaban untuk menjelaskan cara memaksa unduhan dan memberikan nama file. Untuk IE, saya yakin Anda dapat menggunakannya msSaveBlobuntuk membuka dialog "Simpan sebagai". Untuk browser lain, satu-satunya pilihan Anda adalah memilih "Simpan sebagai" secara manual dari menu konteks tautan unduhan.
bcmpinc

1
@ Jek-fdrv: Hanya Blob-url yang berfungsi di Safari. Atribut unduhan dan konstruktor File tidak didukung oleh Safari, jadi Anda tidak dapat memaksa unduhan, artinya gumpalan itu mungkin akan dibuka di browser itu sendiri, dan Anda tidak dapat menentukan nama file. Untuk contoh yang diberikan, Anda masih dapat mengunduh file dengan Safari menggunakan menu konteks tautan.
bcmpinc


Ini adalah jawaban yang sangat membantu dan informatif. Satu hal lagi yang dapat membantu orang-orang seperti saya: setelah pengaturan document.getElementById('link').href = url;, kode Anda dapat melanjutkan dan menyalakan tautan dengan menggunakan metode elemen .click().
LarsH

36
function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

3
Apa efek dari contentType? Untuk apa ini digunakan?
Uri

3
Yang ini berfungsi dengan baik bahkan di Chrome terbaru, tidak seperti jawaban @ Matěj Pokorný. Terima kasih.
Alexander Amelkin

2
Ini tidak berfungsi untuk saya di FF36 atau IE11. Jika saya ganti a.clickdengan menggunakan kode document.createEvent()seperti yang disarankan Matěj Pokorný, ia bekerja pada FF tetapi tidak pada IE. Saya belum mencoba Chrome.
Peter Hull

25

Lihatlah Doug Neiner Unduhan yang merupakan antarmuka JavaScript berbasis Flash untuk melakukan ini.

Downloadify adalah pustaka JavaScript + Flash kecil yang memungkinkan pembuatan dan penyimpanan file dengan cepat, di browser, tanpa interaksi server.


6
Bagi kebanyakan orang, ini mungkin jawaban yang mereka butuhkan. Jadi meskipun tidak memenuhi persyaratan spesifik saya (seperti yang dijelaskan di atas) saya menandainya sebagai jawaban yang diterima.
Toji

2
@Toji ah, begitu. Mungkin bertanya ulang dan frase ulang di bawah HTML 5spanduk dan tag yang sesuai? Itu mungkin akan menarik para pengguna yang tahu tentang bidang spesifik itu (saya kira masih sedikit, sekarang). Saya cukup yakin itu bisa dilakukan dalam HTML 5 tetapi saya tidak tahu caranya.
Pekka

1
Apakah domain downloadify.info Downloadify telah dibeli / ditransfer, dan jika demikian apakah ada lokasi baru? Situs ini tampaknya sama sekali tidak terkait dengan jawaban yang diberikan.
Christos Hayward

17
Ini tidak menjawab pertanyaan Menggunakan HTML5 ... - berjudul.
Ixx

5
@ Ixx harus adil, itu ditambahkan setelah jawabannya diposting. Tetap saja Anda benar. Jawaban di bawah ini harus diterima
Pekka

17

Solusi Sederhana!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

Bekerja di semua browser modern.


Hai, apakah Anda tahu cara menentukan perilaku atribut "unduhan" menggunakan window.open atau fungsi javascript lainnya?
Yucer

2
@yucer Tidak ada atribut unduhan (atau atribut apa pun dalam hal ini) dengan window.open(). Itu tidak relevan. Anda bisa menggunakan metode ini dan memaksakannya .click(), tetapi perhatikan waktunya karena Firefox tidak menyukainya jika Anda menelepon .click()sebelum membiarkan elemen melampirkan ke tubuh.
Brad

Namun sayangnya semua ruang terhapus. Dalam kasus saya, ini sangat buruk karena saya ingin mengunduh kode sumber untuk file SVG.
frankenapps

spasi dipertahankan jika Anda menggunakan komponen encodeURIC (konten)
Mike Redrobe

tidak dapat memilih nama di firefox, tetapi chrome berfungsi
Bhikkhu Subhuti

10

Anda dapat menghasilkan URI data . Namun, ada batasan khusus browser.


1
Ini menarik. Saya akan melihat lebih dalam ketika saya mendapat kesempatan. Terima kasih!
Toji

@quantumpotato, sebenarnya menghasilkan URL agak sulit dijelaskan. Semua seluk beluk ada di RFC 2397 . Anda dapat menggunakan alat seperti ini untuk pengujian. Kemudian, untuk aplikasi asli Anda, Anda dapat mencari URI data atau pangkalan 64 untuk bahasa Anda. Jika Anda tidak menemukannya, jangan ragu untuk mengajukan pertanyaan tindak lanjut. Beberapa batasan spesifik browser diberikan dalam artikel Wikipedia . Misalnya, IE membatasi panjang dan jenis (mis. Bukan teks / html).
Matthew Flaschen

Menghasilkan URL data tidak terlalu rumit: "data:text/plain;charset=UTF-8,"+encodeURIComponent(text)Tapi ya, IE membatasi ukuran URL data ke jumlah yang tidak dapat digunakan dan tidak mendukungnya untuk hal-hal seperti window.open(...)atau iframe (saya pikir).
panzi

@ Panzi, tidak semudah itu juga. Untuk satu hal, itu bukan tipe MIME yang tepat untuk Collada atau JSON.
Matthew Flaschen

juga jawaban yang tidak informatif. tolong, tambahkan spesifikasi untuk browser, jika Anda menyebutkannya.
T.Todua

10

Saya telah menggunakan FileSaver ( https://github.com/eligrey/FileSaver.js ) dan berfungsi dengan baik.
Sebagai contoh, saya melakukan fungsi ini untuk mengekspor log yang ditampilkan pada halaman.
Anda harus melewati array untuk instanciation the Blob, jadi saya mungkin tidak menulis ini dengan cara yang benar, tetapi itu bekerja untuk saya.
Untuk berjaga-jaga, berhati-hatilah dengan penggantian: ini adalah sintaks untuk menjadikan ini global, jika tidak maka hanya akan menggantikan yang pertama yang ia temui.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

2
FileSaver hebat, inilah IE Shim untuk fungsi pra-IE10 preIE10SaveAs: (nama file, isi dokumen, mimetype) {var w = window.open (); var doc = w.document; doc.open (mimetype, 'replace'); doc.charset = "utf-8"; doc.write (filecontent); doc.close (); doc.execCommand ("SaveAs", null, nama file); }
aqm

Peringatan tentang shim @ aqm: Menjalankan tag skrip.
GameFreak

Juga, mungkin diinginkan untuk menempatkan w.close();setelahexecCommand
GameFreak

8

Saya menemukan dua pendekatan sederhana yang bekerja untuk saya. Pertama, menggunakan aelemen yang sudah diklik dan menyuntikkan data unduhan. Dan kedua, menghasilkan aelemen dengan data unduhan, menjalankan a.click()dan menghapusnya lagi. Tetapi pendekatan kedua hanya berfungsi jika diminta oleh tindakan klik pengguna juga. (Beberapa) Blok browser click()dari konteks lain seperti saat memuat atau dipicu setelah batas waktu (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

2
Anda juga bisa memasukkan ake dalam dokumen (mungkin dengan "display:none"), klik, lalu hapus.
Teepeemm

1
apakah ini akan berfungsi di browser di mana atribut unduhan tidak didukung seperti bahkan modern yaitu dan safari .. caniuse.com/#feat=download
Muhammad Umer

1
Baru saja menguji Safari 5.0 di bawah anggur. Versi pertama berfungsi, yang kedua tidak. Saya menguji IE 8 (anggur) juga dan tidak berhasil.
maikel

6

Berikut ini tautan ke data metode URI yang disarankan Mathew, ini bekerja pada safari, tetapi tidak baik karena saya tidak dapat mengatur jenis file, itu akan disimpan sebagai "tidak diketahui" dan kemudian saya harus pergi ke sana lagi nanti dan mengubahnya agar untuk melihat file ...

http://www.nihilogic.dk/labs/canvas2image/


4

Anda dapat menggunakan Penyimpanan lokal. Ini adalah setara dengan Html5 cookie. Tampaknya berfungsi di Chrome dan Firefox TETAPI di Firefox, saya perlu mengunggahnya ke server. Artinya, pengujian langsung di komputer di rumah saya tidak berfungsi.

Saya sedang mengerjakan contoh HTML5. Buka http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html dan gulir ke labirin. Informasi untuk membangun kembali labirin disimpan menggunakan localStorage.

Saya datang ke artikel ini mencari JavaScript HTML5 untuk memuat dan bekerja dengan file xml. Apakah sama dengan html dan JavaScript yang lebih lama ????


4

mencoba

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

Jika Anda ingin mengunduh data biner, lihat di sini

Memperbarui

2020.06.14 Saya memutakhirkan Chrome menjadi 83.0 dan di atas karya penghenti snippet SO (karena pembatasan keamanan kotak pasir ) - tetapi versi JSFiddle berfungsi - di sini


3

Seperti yang disebutkan sebelumnya File API, bersama dengan FileWriter dan FileSystem APIs dapat digunakan untuk menyimpan file di mesin klien dari konteks tab / jendela browser.

Namun, ada beberapa hal yang berkaitan dengan dua API terakhir yang harus Anda perhatikan:

  • Implementasi API saat ini hanya ada di browser berbasis Chromium (Chrome & Opera)
  • Kedua API dikeluarkan dari jalur standar W3C pada 24 April 2014, dan sampai sekarang adalah milik
  • Penghapusan API (sekarang milik) dari penerapan browser di masa depan adalah suatu kemungkinan
  • Kotak pasir (lokasi pada disk di luar di mana file tidak dapat menghasilkan efek) digunakan untuk menyimpan file yang dibuat dengan API
  • Sistem file virtual (struktur direktori yang tidak perlu ada pada disk dalam bentuk yang sama ketika diakses dari dalam browser) digunakan mewakili file yang dibuat dengan API.

Berikut adalah contoh sederhana tentang bagaimana API digunakan, secara langsung dan tidak langsung, bersamaan untuk melakukan ini:

BakedGoods *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Menggunakan File mentah, FileWriter, dan API FileSystem

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Meskipun FileSystem dan FileWriter APIs tidak lagi sesuai standar, penggunaannya dapat dibenarkan dalam beberapa kasus, menurut saya, karena:

  • Minat baru dari vendor browser yang tidak menerapkan dapat menempatkan mereka kembali di atasnya
  • Penetrasi pasar untuk penerapan browser (berbasis Chromium) tinggi
  • Google (kontributor utama untuk Chromium) belum memberikan dan tanggal akhir masa pakainya untuk API

Apakah "beberapa kasus" mencakup kasus Anda, apakah Anda yang memutuskan.

* BakedGoods dikelola oleh orang lain di sini :)


2

Utas ini sangat berharga untuk mengetahui cara menghasilkan file biner dan meminta untuk mengunduh file yang disebutkan, semua dalam kode klien tanpa server.

Langkah pertama bagi saya adalah membuat gumpalan biner dari data yang saya simpan. Ada banyak sampel untuk melakukan ini untuk satu jenis biner, dalam kasus saya, saya memiliki format biner dengan beberapa jenis yang dapat Anda lewati sebagai array untuk membuat gumpalan.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

Langkah selanjutnya adalah membuat browser meminta pengguna untuk mengunduh gumpalan ini dengan nama yang telah ditentukan.

Yang saya butuhkan hanyalah tautan bernama yang saya tambahkan di HTML5 yang bisa saya gunakan kembali untuk mengganti nama nama file awal. Saya menyembunyikannya karena tautannya tidak perlu ditampilkan.

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

Langkah terakhir adalah meminta pengguna mengunduh file.

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

1

Berikut ini adalah tutorial untuk mengekspor file sebagai ZIP:

Sebelum memulai, ada perpustakaan untuk menyimpan file, nama perpustakaan adalah fileSaver.js, Anda dapat menemukan perpustakaan ini di sini. Mari kita mulai, Sekarang, sertakan perpustakaan yang diperlukan:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Sekarang salin kode ini dan kode ini akan mengunduh file zip dengan file hello.txt yang memiliki konten Hello World. Jika semuanya berfungsi dengan baik, ini akan mengunduh file.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Ini akan mengunduh file bernama file.zip. Anda dapat membaca lebih lanjut di sini: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.