93. (javascript/자바스크립트) new Blob 사용해 json 파일 , text 텍스트 파일 생성 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. document.createElement : 특정 태그를 생성한다는 의미입니다
    	3. a.setAttribute("download", filename) : a 태그에 다운로드 속성을 지정합니다 
    	4. body.appendChild : body 에 요소를 추가합니다
    	5. body.removeChild : body 에 요소를 삭제합니다
    	6. Blob : Binary Large Object 의미로 웹 브라우저내에서 파일을 저장할 수 있습니다
    	*/

   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log(""); 

    		// [TEXT 다운로드 실시] 
    		var textData = "hello twok";
    		new TextDownload(textData).download();

    		// [JSON 다운로드 실시] 
    		var jsonObj = {"idx":1, "name":"twok"};
    		new JsonDownload(jsonObj).download();
    	}; 	



    	/* [JSON 파일 다운로드 수행 내부 클래스] */
    	class JsonDownload {
    		// 클래스 생성자 초기화 실시
    		constructor(data={}) {
    			this.data = data;
    		}

    		// 파일 다운로드 수행 실시
    		download (type_of = "application/json", filename = "jsonObj.json") { // 확장자명을 json 으로 지정
    			let body = document.body; // body 변수 선언
    			const a = document.createElement("a"); // a 태그 생성 
    			a.href = URL.createObjectURL(new Blob([JSON.stringify(this.data, null, 2)], {
    				type: type_of
    			}));
    			a.setAttribute("download", filename); // a 태그에 다운로드 속성 추가
    			body.appendChild(a); // body에 a 태그 추가
    			a.click(); // 클릭 이벤트를 발생시켜 다운로드
    			body.removeChild(a); // body에서 제거
    		}
    	};
    	


    	/* [TEXT 파일 다운로드 수행 내부 클래스] */
    	class TextDownload {
    		// 클래스 생성자 초기화 실시
    		constructor(data="") {
    			this.data = data;
    		}

    		// 파일 다운로드 수행 실시
    		download (type_of = "text/plain", filename = "textData.txt") { // 확장자명을 txt 으로 지정
    			let body = document.body; // body 변수 선언
    			const a = document.createElement("a"); // a 태그 생성 
    			a.href = URL.createObjectURL(new Blob([this.data], {
    				type: type_of
    			}));
    			a.setAttribute("download", filename); // a 태그에 다운로드 속성 추가
    			body.appendChild(a); // body에 a 태그 추가
    			a.click(); // 클릭 이벤트를 발생시켜 다운로드
    			body.removeChild(a); // body에서 제거
    		}
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

[JSON 파일]​

​

[TEXT 파일]​

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. document.createElement : 특정 태그를 생성한다는 의미입니다

3. a.setAttribute("download", filename) : a 태그에 다운로드 속성을 지정합니다

4. body.appendChild : body 에 요소를 추가합니다

5. body.removeChild : body 에 요소를 삭제합니다

6. Blob : Binary Large Object 의미로 웹 브라우저내에서 파일을 저장할 수 있습니다

*/

/* =========================== */