서버를 사용하지 않고 JavaScript로 생성된 파일을 브라우저에 어떻게 저장할 수 있습니까?

HTML5/JavaScript를 사용하여 파일 생성 및 저장

웹 브라우저에서 파일을 생성하고 저장하는 것은 특히 동적 작업을 처리할 때 일반적인 작업입니다. 콘텐츠. 이 프로세스에 서버를 포함시키는 것이 가능하지만 서버의 역할이 최소화되면 비효율적일 수 있습니다. 이 질문은 순수 JavaScript를 사용하여 서버를 사용하지 않고도 웹 브라우저에서 파일을 쉽게 저장할 수 있는 가능성을 탐구합니다.

과제: JavaScript로 파일 저장

사용자는 Collada 파일(자세한 3D 모델 형식)을 보다 관리하기 쉬운 JSON 형식으로 구문 분석하는 스크립트를 개발했습니다. 구문 분석된 파일은 메모리에 저장되며 사용자는 사용자가 서버를 거치지 않고 변환된 파일을 다운로드할 수 있는 방법을 제공하려고 합니다.

해결책: HTML5 Blob 및 다운로드 속성

해결책은 HTML5 Blob 및 다운로드 속성에 있습니다. Blob 객체를 사용하면 메모리에 파일과 유사한 객체를 생성할 수 있고, 태그의 Download 속성을 사용하면 파일 이름을 지정하고 다운로드를 시작할 수 있습니다.

다음은 프로세스를 보여주는 코드 조각입니다. :

function download(filename, text) {
    var blob = new Blob([text], {type: 'text/plain'});
    var pom = document.createElement('a');
    pom.setAttribute('href', URL.createObjectURL(blob));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

사용법:

사용하려면 다운로드 기능을 호출하려면 원하는 파일 이름과 저장할 텍스트를 지정하면 됩니다. 예:

download('test.txt', 'Hello world!');

이렇게 하면 사용자 컴퓨터에 "Hello world!"라는 텍스트가 포함된 "test.txt"라는 파일이 생성됩니다.

호환성:

다운로드 기능은 Blob 및 다운로드 속성을 지원하는 최신 브라우저에서 작동합니다. 여기에는 다음이 포함됩니다:

• Chrome
• Firefox
• Safari
• Edge
• Opera

위 내용은 서버를 사용하지 않고 JavaScript로 생성된 파일을 브라우저에 어떻게 저장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!