Bagaimana untuk Menetapkan Nama Fail Tersuai Semasa Memuat Turun Fail Blob dalam JavaScript?

JavaScript: Menetapkan Nama Fail untuk Fail Blob untuk Muat Turun Terus

Apabila memuat turun fail gumpalan dalam JavaScript menggunakan window.location, fail itu biasanya disimpan dengan nama generik. Untuk menetapkan nama fail tersuai, anda perlu menggunakan teknik khusus yang melibatkan penciptaan tag.

Dalam contoh kod asal:

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

Kod ini memuat turun fail bernama:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

Untuk menetapkan nama fail sebagai my-download.json, ikut langkah ini:

1. Buat tag dan tambahkannya pada dokumen:

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";

2. Tetapkan atribut href tag ke URL gumpalan dan atribut muat turun ke nama fail yang dikehendaki:

a.href = url;
a.download = "my-download.json";

3. Cetuskan muat turun dengan mengklik pada tag:

a.click();

4. Batalkan URL gumpalan untuk mengelakkannya daripada diakses semula:

window.URL.revokeObjectURL(url);

Contoh Pelaksanaan:

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

Nota:

• Pelayar lama mungkin tidak menyokong atribut muat turun.
• Sesetengah format fail ( cth., JSON) mungkin perlu disimpan dengan sambungan yang berbeza (cth., txt) untuk mengelakkan keselamatan sekatan.
• Pertimbangkan untuk menggunakan perpustakaan seperti FileSaver.js untuk penyelesaian yang lebih mantap dan boleh dipercayai.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Nama Fail Tersuai Semasa Memuat Turun Fail Blob dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!