Bağlantı olmadan JavaScript blob dosya adı

Window.location üzerinden indirmeye zorladığınızda JavaScript'te bir blob dosyasının adını nasıl ayarlarsınız?

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

Yukarıdaki kodu çalıştırmak, aşağıdaki gibi bir sayfa yenilemesi olmadan anında bir dosya indirir:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

Bunun yerine dosya adını my-download.json olarak ayarlamak istiyorum .

Farkında olduğum tek yol FileSaver.js tarafından kullanılan hile :

1. Gizli bir <a>etiket oluşturun .
2. Onun Set hrefBlob URL'sini niteliği.
3. downloadÖzniteliğini dosya adına ayarlayın .
4. <a>Etiketi tıklayın .

İşte basitleştirilmiş bir örnek ( jsfiddle ):

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

Bu örneği sadece fikri göstermek için yazdım, üretim kodunda FileSaver.js kullanın.

notlar

• Daha eski tarayıcılar, HTML5'in bir parçası olduğu için "indirme" özelliğini desteklemez.
• Bazı dosya biçimlerinin tarayıcı tarafından güvenli olmadığı kabul edilir ve indirme başarısız olur. Txt uzantılı JSON dosyalarını kaydetmek benim için çalışıyor.

Ben sadece Internet Explorer (en modern sürümleri, her neyse) desteği ile kabul edilen cevabı genişletmek ve jQuery kullanarak kodu düzenlemek istedim:

$(document).ready(function() {
    saveFile("Example.txt", "data:attachment/text", "Hello, world.");
});

function saveFile (name, type, data) {
    if (data !== null && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([data], { type: type }), name);
    var a = $("<a style='display: none;'/>");
    var url = window.URL.createObjectURL(new Blob([data], {type: type}));
    a.attr("href", url);
    a.attr("download", name);
    $("body").append(a);
    a[0].click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

İşte bir örnek Fiddle . Godspeed .

Yukarıdaki çözümlerle aynı prensip. Ancak büyük dosyaların (> 40 MByte) rasgele konumlarda kesildiği Firefox 52.0 (32 bit) ile ilgili sorunlar yaşadım. RevokeObjectUrl () çağrısının yeniden programlanması bu sorunu giderir.

function saveFile(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    const a = document.createElement('a');
    document.body.appendChild(a);
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }, 0)
  }
}

jsfiddle örneği

Geç kaldım, ama aynı problemi yaşadığım için çözümümü ekliyorum:

function newFile(data, fileName) {
    var json = JSON.stringify(data);
    //IE11 support
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        let blob = new Blob([json], {type: "application/json"});
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {// other browsers
        let file = new File([json], fileName, {type: "application/json"});
        let exportUrl = URL.createObjectURL(file);
        window.location.assign(exportUrl);
        URL.revokeObjectURL(exportUrl);
    }
}

saveFileOnUserDevice = function(file){ // content: blob, name: string
        if(navigator.msSaveBlob){ // For ie and Edge
            return navigator.msSaveBlob(file.content, file.name);
        }
        else{
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(file.content);
            link.download = file.name;
            document.body.appendChild(link);
            link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
            link.remove();
            window.URL.revokeObjectURL(link.href);
        }
    }

Çalışma örneğiBir url'deki kedi fotoğrafını "cat.jpg" olarak kaydetmek için indirme düğmesinin :

HTML:

<button onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg', 'cat.jpg')">Download</button>

JavaScript:

function downloadUrl(url, filename) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function(e) {
    if (this.status == 200) {
      const blob = this.response;
      const a = document.createElement("a");
      document.body.appendChild(a);
      const blobUrl = window.URL.createObjectURL(blob);
      a.href = blobUrl;
      a.download = filename;
      a.click();
      setTimeout(() => {
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      }, 0);
    }
  };
  xhr.send();
}

window.location.assign benim için çalışmadı. iyi indirir, ancak Windows platformunda bir CSV dosyası için uzantı olmadan indirir. Aşağıdakiler benim için çalıştı.

    var blob = new Blob([csvString], { type: 'text/csv' });
    //window.location.assign(window.URL.createObjectURL(blob));
    var link = window.document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    // Construct filename dynamically and set to link.download
    link.download = link.href.split('/').pop() + '.' + extension; 
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

Bu benim çözümüm. Benim açımdan, atlayamazsın <a>.

function export2json() {
  const data = {
    a: '111',
    b: '222',
    c: '333'
  };
  const a = document.createElement("a");
  a.href = URL.createObjectURL(
    new Blob([JSON.stringify(data, null, 2)], {
      type: "application/json"
    })
  );
  a.setAttribute("download", "data.json");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

<button onclick="export2json()">Export data to json file</button>