Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menetapkan Nama Fail Tersuai Semasa Memuat Turun Fail Blob dalam JavaScript?

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

Linda Hamilton
Lepaskan: 2024-12-13 18:46:10
asal
740 orang telah melayarinya

How to Set a Custom Filename When Downloading a Blob File in 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);
}
Salin selepas log masuk

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";
Salin selepas log masuk
  1. Tetapkan atribut href tag ke URL gumpalan dan atribut muat turun ke nama fail yang dikehendaki:
a.href = url;
a.download = "my-download.json";
Salin selepas log masuk
  1. Cetuskan muat turun dengan mengklik pada tag:
a.click();
Salin selepas log masuk
  1. Batalkan URL gumpalan untuk mengelakkannya daripada diakses semula:
window.URL.revokeObjectURL(url);
Salin selepas log masuk

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);
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan