JavaScript에서 Blob 파일을 다운로드할 때 사용자 정의 파일 이름을 설정하는 방법은 무엇입니까?

JavaScript: 직접 다운로드를 위한 Blob 파일의 파일 이름 설정

window.location을 사용하여 JavaScript로 Blob 파일을 다운로드할 때 파일은 일반적으로 다음과 같습니다. 일반 이름으로 저장되었습니다. 사용자 정의 파일 이름을 설정하려면 숨겨진 tag.

원래 코드 예에서:

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

이 코드는

bfefe410-8d9c-4883-86c5-d76c50a24a1d

에게 파일 이름을

my-download.json으로 설정하고 다음 단계를 따르세요.

숨겨진 태그를 지정하고 문서에 추가합니다.

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

태그의 href 속성을 Blob의 URL로, 다운로드 속성을 원하는 파일 이름으로 설정합니다.

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

태그:

a.click();

다시 액세스하지 못하도록 Blob의 URL을 취소합니다.

window.URL.revokeObjectURL(url);

예 구현:

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

참고:

이전 브라우저는 다운로드 속성을 지원하지 않을 수 있습니다.
• 일부 파일 형식( 예를 들어 JSON)은 보안을 피하기 위해 다른 확장자(예: txt)로 저장해야 할 수도 있습니다.
• 더 강력하고 안정적인 솔루션을 위해 FileSaver.js와 같은 라이브러리 사용을 고려해 보세요.

위 내용은 JavaScript에서 Blob 파일을 다운로드할 때 사용자 정의 파일 이름을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!