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

JavaScript에서 사용자 정의 Blob 파일 이름 설정

JavaScript에서 Blob으로 작업할 때 사용자 정의를 지정해야 하는 상황이 발생할 수 있습니다. 무작위로 생성된 기본 이름 대신 파일 이름을 지정합니다. 이는 다운로드 또는 데이터 내보내기를 위해 의미 있는 파일 이름을 제공하려는 경우 특히 유용합니다.

문제: 사용자 정의 Blob 파일 이름 할당

다음 코드 조각은 blob을 실행하고 window.location을 통해 다운로드를 시도하지만 다운로드한 파일의 이름이 다음과 같습니다. "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);
}

해결 방법: A 태그 트릭 사용

사용자 정의 파일 이름을 할당하는 유일한 알려진 방법 JavaScript의 blob에는 숨겨진 태그:

1. 숨겨진 태그.
2. href 속성을 Blob의 URL로 설정합니다.
3. 다운로드 속성을 원하는 파일 이름으로 설정합니다.
4. 프로그래밍 방식으로 태그를 지정합니다.

예제 코드:

다음 예에서는 이 트릭을 사용하여 JSON 개체를 이름이 있는 파일에 저장하는 방법을 보여줍니다. "my-download.json":

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

참고:

• 이전 브라우저는 다운로드 속성을 지원하지 않을 수 있습니다.
• 확실함 파일 형식은 브라우저에서 지원되지 않을 수 있으며 다운로드가 실패할 수 있습니다. 예를 들어, .txt 확장자를 사용하여 JSON 파일을 저장하는 것이 작동하는 것으로 관찰되었습니다.

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