Son zamanlarda WebGL ile uğraşıyordum ve bir Collada okuyucusunun çalışmasını sağladım. Sorun oldukça yavaş (Collada çok ayrıntılı bir formattır), bu yüzden dosyaları kullanımı daha kolay bir formata dönüştürmeye başlayacağım (muhtemelen JSON). Zaten JavaScript dosya ayrıştırma kodu var, bu yüzden de benim ihracatçı olarak da kullanabilirsiniz! Sorun kaydediyor.

Şimdi, dosyayı ayrıştırabildiğimi, sonucu sunucuya gönderebileceğimi ve tarayıcının dosyayı sunucudan karşıdan yükleme olarak istemesini sağlayabildiğimi biliyorum. Ancak gerçekte sunucunun bu özel işlemle ilgisi yoktur, o zaman neden bu işe karışsın? Zaten bellekte istenen dosyanın içeriği var. Ben kullanıcıya saf JavaScript kullanarak bir indirme sunmak için herhangi bir yolu var mı? (Bundan şüphe ediyorum, ama sorabilir de ...)

Ve net olmak gerekirse: Kullanıcıların bilgisi olmadan dosya sistemine erişmeye çalışmıyorum! Kullanıcı bir dosya sağlayacaktır (muhtemelen sürükle ve bırak yöntemiyle), komut dosyası dosyayı hafızaya dönüştürür ve kullanıcıdan sonucu indirmesi istenir. Bunların tümü, tarayıcı açısından "güvenli" etkinlikler olmalıdır.

[EDIT]: Açıkça bahsetmedim, bu yüzden "Flash" yanıtlayan posterler yeterince geçerli, ama yaptığım şeyin bir kısmı saf HTML5 ile neler yapılabileceğini vurgulama girişimidir ... bu yüzden Flash tam da benim durumumda. (Gerçi "gerçek" bir web uygulaması yapan herkes için mükemmel geçerli bir cevap olsa da.) Bu durumda sunucuyu dahil etmek istemiyorum sürece ben şanssız gibi görünüyor. Yine de teşekkürler!

Tamam, bir veri oluşturma: Matthew ve Dennkster bu seçeneği işaret ettiği için URI benim için kesinlikle hile yapıyor! Temelde nasıl yaparım:

1) tüm içeriği "içerik" adlı bir dizeye alın (örneğin başlangıçta orada oluşturarak veya önceden oluşturulmuş bir sayfanın etiketinin innerHTML'sini okuyarak).

2) Veri URI'sini oluşturun:

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

Tarayıcı türüne vb. Bağlı olarak uzunluk sınırlamaları olacaktır, ancak örneğin Firefox 3.6.12 en az 256k'ye kadar çalışır. Base64'te kodlamak yerine encodeURIComponent kullanmak işleri daha verimli hale getirebilir, ama benim için sorun değil.

3) yeni bir pencere açın ve bu URI'ye "yeniden yönlendirin", JavaScript tarafından oluşturulan sayfamın indirme konumunu ister:

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

Bu kadar.

HTML5'e hazır tarayıcılar için basit çözüm ...

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

kullanım

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

HTML5 bir window.saveAs(blob, filename)yöntem tanımladı . Şu anda hiçbir tarayıcı tarafından desteklenmiyor. Ancak , çoğu modern tarayıcıya (Internet Explorer 10+ dahil) bu işlevi ekleyen FileSaver.js adlı bir uyumluluk kütüphanesi vardır . Internet Explorer 10, Internet Explorer desteği için FileSaver.js'de kullanılan bir navigator.msSaveBlob(blob, filename)yöntemi ( MSDN ) destekler.

Bu sorunla ilgili daha fazla ayrıntı içeren bir blog yazısı yazdım .

Büyük dosyaları kaydetme

Uzun veri URI'leri tarayıcılarda performans sorunları verebilir. İstemci tarafında oluşturulan dosyaları kaydetmenin başka bir seçeneği de içeriğini bir Blob (veya Dosya) nesnesine koymak ve kullanarak bir indirme bağlantısı oluşturmaktır URL.createObjectURL(blob). Bu, blobun içeriğini almak için kullanılabilecek bir URL döndürür. Blob, URL.revokeObjectURL()URL'de çağrılana veya onu oluşturan belge kapatılıncaya kadar tarayıcının içinde saklanır . Çoğu web tarayıcısının nesne URL'leri desteği vardır , Opera Mini bunları desteklemeyen tek kişidir.

İndirme zorlama

Veriler metin veya resim ise, tarayıcı dosyayı diske kaydetmek yerine açabilir. Bağlantıyı tıkladıktan sonra dosyanın indirilmesine neden olmak için downloadözniteliği kullanabilirsiniz . Ancak, tüm web tarayıcılarının indirme özelliği için desteği yoktur . Başka bir seçenek, application/octet-streamdosyanın mime türü olarak kullanmaktır, ancak bu, dosyanın bir dosya adı belirtmezseniz veya belirleyemezseniz, özellikle ikili bir blob olarak sunulmasına neden olur. Ayrıca bkz. ' Farklı Kaydet ...' açılır penceresini aç '.

Bir dosya adı belirtme

Blob Dosya oluşturucu ile oluşturulmuşsa, bir dosya adı da ayarlayabilirsiniz, ancak yalnızca birkaç web tarayıcısının (Chrome ve Firefox dahil) Dosya oluşturucu için desteği vardır . Dosya adı, downloadözniteliğin bağımsız değişkeni olarak da belirtilebilir , ancak bu bir dizi güvenlik konusuna tabidir . Internet Explorer 10 ve 11 kendi yöntemini sağlar, msSaveBlob bir dosya adı belirtmek için .

Örnek kod

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

Bunu yapmak için Flash tabanlı bir JavaScript arayüzü olan Doug Neiner'ın Downloadify'ına bir göz atın .

Downloadify, tarayıcıda sunucu etkileşimi olmadan dosyaların anında oluşturulmasını ve kaydedilmesini sağlayan küçük bir JavaScript + Flash kütüphanesidir.

Basit Çözüm!

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

Tüm Modern tarayıcılarda çalışır.

Bir veri URI'si oluşturabilirsiniz . Ancak, tarayıcıya özgü sınırlamalar vardır.

FileSaver ( https://github.com/eligrey/FileSaver.js ) kullandım ve gayet iyi çalışıyor.
Örneğin, bu işlevi bir sayfada görüntülenen günlükleri dışa aktarmak için yaptım.
Blob'un örneklenmesi için bir dizi geçmek zorundasınız, bu yüzden belki de bunu doğru şekilde yazmadım, ama benim için çalışıyor.
Her ihtimale karşı, değiştirmeye dikkat edin: bu, global hale getirme sözdizimidir, aksi takdirde yalnızca ilk tanıştığı yerine geçer.

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

Benim için işe yarayan iki basit yaklaşım buldum. İlk olarak, zaten tıklanmış bir aöğeyi kullanarak ve indirme verilerini enjekte edin. İkincisi, aindirme verileriyle bir öğe oluşturmak , yürütmek a.click()ve tekrar kaldırmak. Ancak ikinci yaklaşım yalnızca bir kullanıcı tıklama eylemi tarafından çağrıldığında işe yarar. (Bazı) click()Yükleme gibi veya zaman aşımından sonra tetiklenen (setTimeout) gibi diğer bağlamlardan gelen tarayıcı bloğu .

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

İşte Mathew'in önerdiği veri URI yöntemine bir bağlantı, safari üzerinde çalıştı, ancak dosya türünü ayarlayamadığım için iyi değil, "bilinmeyen" olarak kaydedildi ve daha sonra tekrar oraya gitmeli ve sırayla değiştirmeliyim dosyayı görüntülemek için ...

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

LocalStorage'ı kullanabilirsiniz. Bu çerezlerin Html5 eşdeğeri. Firefox'ta Chrome ve Firefox AMA'da çalışıyor gibi görünüyor, bir sunucuya yüklemem gerekiyordu. Yani, doğrudan ev bilgisayarımda test yapmak işe yaramadı.

HTML5 örnekleri üzerinde çalışıyorum. Http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html adresine gidin. labirent birine ve kaydırma. Labirenti yeniden oluşturmak için bilgi localStorage kullanılarak saklanır.

Bu makaleye xml dosyalarını yüklemek ve çalışmak için HTML5 JavaScript aramaya geldim. Eski html ve JavaScript ile aynı mı ????

Deneyin

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

İkili verileri indirmek istiyorsanız buraya bakın

Güncelleme

2020.06.14 Chrome'u 83.0 ve üstüne yükseltiyorum SO snippet stop çalışmaları ( korumalı alan güvenlik kısıtlamaları nedeniyle ) - ancak JSFiddle sürümü çalışıyor - burada

Daha önce belirtildiği gibi , FileWriter ve FileSystem ile birlikte File API API'leri, bir tarayıcı sekmesi / penceresi bağlamında bir istemcinin makinesinde dosya depolamak için kullanılabilir.

Bununla birlikte, bilmeniz gereken son iki API ile ilgili birkaç şey vardır:

• API'ların uygulamaları şu anda yalnızca Chromium tabanlı tarayıcılarda (Chrome ve Opera) bulunmaktadır
• Her iki API da 24 Nisan 2014 tarihinde W3C standartlarından çıkarıldı ve şu an için tescilli
• Gelecekte (artık tescilli) API'lerin tarayıcı uygulamaktan kaldırılması bir olasılıktır
• API'lerle oluşturulan dosyaları depolamak için bir korumalı alan (diskin üzerinde dosyaların hiçbir etki yaratmayacağı bir konum) kullanılır
• Bir sanal dosya sistemi kullanılır (mutlaka tarayıcınızdan erişebilirsiniz olmadığını aynı formda diskte bulunmayan bir dizin yapısı) API'leri ile oluşturulmuş dosyaları temsil

API'lerin bunu yapmak için doğrudan ve dolaylı olarak nasıl kullanıldığına dair basit örnekler:

BakedGoods *

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

Ham File, FileWriter ve FileSystem API'lerini kullanma

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

FileSystem ve FileWriter API'leri artık standartlar üzerinde yer almasa da, bazı durumlarda kullanımları haklı olabilir, çünkü:

• Uygulama dışı bırakılan tarayıcı satıcılarının ilgisinin artması, onları doğrudan sitenin üzerine yerleştirebilir
• Uygulama (Chromium tabanlı) tarayıcıların pazara nüfuzu yüksektir
• Google (Chromium'un ana katkısı), API'lara kullanım ömrü vermemiştir ve kullanım ömrü sonu

Bununla birlikte, "bazı vakaların" kendi davalarınızı kapsaması, sizin karar vermeniz içindir.

* BakedGoods, buradaki başka biri tarafından korunmuyor :)

Bu iş parçacığı, bir sunucu olmadan istemci kodunda, bir ikili dosya oluşturmak ve adlandırılmış dosyayı indirmek istemini anlamak için çok değerli.

Benim için ilk adım, kaydettiğim verilerden ikili blob oluşturmaktı. Bunu tek bir ikili tip için yapmak için çok sayıda örnek var, benim durumumda blob oluşturmak için bir dizi olarak iletebileceğiniz birden fazla tip ile bir ikili format var.

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

Bir sonraki adım, tarayıcının kullanıcıdan bu blobunu önceden tanımlanmış bir adla indirmesini istemesini sağlamaktır.

İhtiyacım olan tek şey, ilk dosya adını yeniden adlandırmak için yeniden kullanabileceğim HTML5'e eklediğim adlandırılmış bir bağlantıydı. Bağlantının görüntülenmesi gerekmediğinden gizli tuttum.

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

Son adım kullanıcıdan dosyayı indirmesini istemektir.

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

İşte dosyaları ZIP olarak dışa aktarmak için bir öğretici:

Başlamadan önce, dosyaları kaydetmek için bir kütüphane var, kütüphanenin adı fileSaver.js, Bu kütüphaneyi burada bulabilirsiniz. Şimdi gerekli kütüphaneleri ekleyelim:

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

Şimdi bu kodu kopyalayın ve bu kod, Hello World içeriğine sahip hello.txt dosyası içeren bir zip dosyası indirecektir. Her şey yolunda giderse, bu bir dosya indirir.

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

Bu, file.zip adlı bir dosyayı indirecektir. Daha fazla bilgiyi buradan okuyabilirsiniz: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library