How to Set a Custom Filename When Downloading a Blob File in JavaScript?-JS Tutorial-php.cn

How to Set a Custom Filename When Downloading a Blob File in JavaScript?

Linda Hamilton

Release： 2024-12-13 18:46:10

Original

800 people have browsed it

How to Set a Custom Filename When Downloading a Blob File in JavaScript?

JavaScript: Setting Filename for Blob File for Direct Download

When downloading a blob file in JavaScript using window.location, the file is typically saved with a generic name. To set a custom filename, it is necessary to employ a specific technique that involves creating a hidden tag.

In the original code example:

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

Copy after login

This code downloads a file named:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

To set the filename as my-download.json, follow these steps:

Create a hidden tag and append it to the document:

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

Copy after login

Set the tag's href attribute to the blob's URL and download attribute to the desired filename:

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

Copy after login

Trigger the download by clicking on the tag:

a.click();

Copy after login

Revoke the blob's URL to prevent it from being accessed again:

window.URL.revokeObjectURL(url);

Copy after login

Example Implementation:

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

Copy after login

Notes:

Older browsers may not support the download attribute.
Some file formats (e.g., JSON) may need to be saved with a different extension (e.g., txt) to avoid security restrictions.
Consider using a library like FileSaver.js for a more robust and reliable solution.

The above is the detailed content of How to Set a Custom Filename When Downloading a Blob File in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!