HTML페이지를 Word로 출력하는 방법
HTML
<div class="col-xs-3 col-xs-offset-3 text-center">
<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> </p><p> </p>
<p>한가지 주의: hwp다운로드 후 열때 UTF-8으로 여셔야 됩니다. 웹브라우저 상에서는 UTF-8를 메인으로 사용 하기 때문에</p>
</div>
Javascript
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>';
}
가로로 출력하기
<html xmlns:office="urn:schemas-microsoft-com:office:office"
xmlns:word="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<br>
<button onclick="export_to_word()">Export</button>
<div id="docx">
<style>
table, tr, td, th{
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
.normal {
font-family:"Calibri",sans-serif;
line-height:107%;
font-size:11.0pt;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
}
@page portrait_A4_page {
size:595.3pt 841.9pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
div.portrait_A4_page { page:portrait_A4_page; }
@page landscape_A4_page {
size:841.9pt 595.3pt;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.45pt;
mso-footer-margin:35.45pt;
mso-paper-source:0;
}
div.landscape_A4_page { page:landscape_A4_page; }
</style>
<div class=landscape_A4_page>
<table class=normal>
<tr>
<td>a table that goes really wide</td>
</tr>
</table>
</div>
</div>
'기타' 카테고리의 다른 글
| Window 작업표시줄 그룹 안만들기 (0) | 2021.06.13 |
|---|---|
| IE에서 Chrome 기능 구현 (0) | 2020.01.30 |
| /var/www/html 업로드 권한설정 (0) | 2019.08.02 |
| AWS EC2 세팅 메뉴얼 (0) | 2019.08.02 |
| Apache 설치 (0) | 2019.08.02 |