안녕하세요. 이번 시간에는 입력한 내용을 텍스트 파일에 저장해보겠습니다.
먼저 실행 결과입니다.
입력한 내용을 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>
'JavaScript' 카테고리의 다른 글
| [ javascript ] EJS 사용해서 서버가 보낸 값 출력하기 (0) | 2023.04.14 |
|---|---|
| [JavaScript]i18next을 활용한 언어 변환 처리 (0) | 2023.04.08 |
| [javascript] mousemove 이벤트 사용하여 마우스 효과 주기. (0) | 2023.04.05 |
| [JavaScript] clipboard api를 사용해서 클립보드에 특정 텍스트를 복사하는 방법 (0) | 2023.04.03 |
| [JavaScript] client에서 쿠키 생성, 수정, 삭제하는 방법 (0) | 2023.04.02 |
