Bagaimana untuk Menetapkan Nama Fail Tersuai untuk Muat Turun Blob dalam JavaScript?

Menetapkan Nama Fail Blob Tersuai dalam JavaScript

Apabila bekerja dengan gumpalan dalam JavaScript, anda mungkin menghadapi situasi di mana anda perlu menentukan tersuai nama fail dan bukannya nama fail lalai yang dijana secara rawak. Ini amat berguna apabila anda ingin memberikan nama fail yang bermakna untuk muat turun atau eksport data.

Masalah: Menetapkan Nama Fail Blob Tersuai

Coretan kod berikut mencipta blob dan cuba memuat turunnya melalui window.location, tetapi fail yang dimuat turun mempunyai nama rawak seperti "bfefe410-8d9c-4883-86c5-d76c50a24a1d":

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

Penyelesaian: Menggunakan A Tag Trick

Satu-satunya kaedah yang diketahui untuk menetapkan nama fail tersuai kepada gumpalan dalam JavaScript melibatkan helah menggunakan tag:

1. Buat tag.
2. Tetapkan atribut hrefnya kepada URL gumpalan.
3. Tetapkan atribut muat turunnya kepada nama fail yang diingini.
4. Klik pada tag secara pemrograman.

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