HTML 내용을 한글 파일로 다운로드 하기(Js방식 / 테스트 가능)

카테고리 : 웹 프로그래밍/HTML
예제 코드 넣기 한글(.hwp) 다운로드 워드(.doc) 다운로드

 

 

한가지 주의: hwp다운로드 후 열때 UTF-8으로 여셔야 됩니다. 웹브라우저 상에서는 UTF-8를 메인으로 사용 하기 때문에

자바스크립트로 hwp 생성, 자바스크립트 hwp만들기,자바스크립트 문서 만들어 다운

 

더보기

hwp 파일을 직접 만들어서 다운이 가능한 경우가 안보였다.

그래서 만들게된 자바스크립트로 hwp파일 생성하기 소스

보통은 php 같은 서버기반 프로그램으로 만들던데 웹에서 돌릴수도 있다.

 

소스코드

<a id="hi098123btn"style="float: right;width: 30%;margin: 4px 0px;padding: 10px 0px;" onclick="hi098123inputcode();">예제 코드 넣기</a>
<textarea style="width: 100%; height: 200px; background-color: #eff;resize: vertical;" id="source-html" placeholder="여기에 html로 작성해주세요"></textarea>

<a id="hi098123btn"style="width: 100%;margin: 4px 0px;padding: 10px 0px;" onclick="htmlToFile('hwp');">한글(.hwp) 다운로드</a>
<a id="hi098123btn"style="width: 100%;margin: 4px 0px;padding: 10px 0px;" onclick="htmlToFile('doc');">워드(.doc) 다운로드</a>
<p>&nbsp;</p><p>&nbsp;</p>
<p>한가지 주의: hwp다운로드 후 열때 UTF-8으로 여셔야 됩니다. 웹브라우저 상에서는 UTF-8를 메인으로 사용 하기 때문에</p>
<script>
	function htmlToFile(file) {
		var header = "<html>"+
            "<head><meta charset='utf-8'></head><body>";
		var footer = "</body></html>";
		var sourceHTML = header+document.getElementById("source-html").value+footer;

		var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
		var fileDownload = document.createElement("a");
		document.body.appendChild(fileDownload);
		fileDownload.href = source;
		fileDownload.download = 'hi098123file.'+file;
		fileDownload.click();
		document.body.removeChild(fileDownload);
	}
	function hi098123inputcode(){
		document.getElementById("source-html").value='<h1 style="text-align:center;">제목</h1>\n<p>p 태그 내용 입니다.</p>\n<table border="1">\n\t<th>테이블</th>\n\t<th>만들기</th>\n\t<tr>\n\t\t<td>첫번째줄 1</td>\n\t\t<td>첫번째줄 2</td>\n\t</tr>\n\t<tr>\n\t\t<td>두번째줄 1</td>\n\t\t<td>두번째줄 2</td>\n\t</tr>\n</table>';
	}
</script>

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글 (11개)