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!

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.

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

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.

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>

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

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.

Solusi Sederhana!

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

Bekerja di semua browser modern.

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

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

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>

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/

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 ????

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

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 :)

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

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