JavaScript

[JavaScript] 입력한 내용을 텍스트 파일에 저장하기

teamnova 2023. 4. 7. 12:00
728x90

안녕하세요. 이번 시간에는 입력한 내용을 텍스트 파일에 저장해보겠습니다.

 

먼저 실행 결과입니다.

 

입력한 내용을 Blob 객체에 담은 뒤

해당 객체를 나타내는 URL 생성, 

a element 에 url연결, download 속성 설정.

a element click하면 입력한 내용이 텍스트 파일에 저장됩니다.

 

 

전체 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="chat" placeholder="저장할 내용을 입력해주세요.">
    <input type="text" id="file_name" placeholder="생성할 파일 이름을 입력해주세요.">

    <button onclick="Download()">다운로드</button>

    <script>
        
        function Download(){

            let chatting = document.querySelector("#chat");
            let file_name = document.querySelector("#file_name");

            const blob = new Blob([chatting.value], {type:'text/plain'});
            const url = window.URL.createObjectURL(blob);

            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = file_name.value;
            document.body.appendChild(a);
            
            a.click();

            setTimeout(() => {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            }, 100);
        }



    </script>



    
</body>
</html>