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

"; var footer = ""; 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='

제목

p 태그 내용 입니다.

\n\n\t\n\t\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\n

테이블	만들기
첫번째줄 1	첫번째줄 2
두번째줄 1	두번째줄 2

'; }

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>

저작자표시 비영리 변경금지

'웹 프로그래밍 > HTML' 카테고리의 다른 글

JS) Location.hash 와 URL의 #부분 처리 (0)	2019.10.27
extension) tabs.getSelected VS tabs.query (0)	2019.10.17
Javascript) innerText vs innerHTML (0)	2019.06.13
HTML) CSS 불러오기 (0)	2019.05.29
HTML) 책갈피 만들기 (0)	2019.05.26
HTTPS 홈페이지 무료로 운영하기 (0)	2019.04.25
크롬 확장 프로그램 분석하기 (0)	2019.04.19
페이지 로딩속도를 빠르게 <link rel="preload"> 활용 (1)	2019.04.15

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

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

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

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

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

제목

소스코드

'웹 프로그래밍 > HTML' 카테고리의 다른 글

저작권 보호안내

링크 공유하기

댓글

티스토리툴바