[JavaScript] 한글 파일(.hwp) 양식에 맞춰 출력하기

개요

회사에서 공공기관 관련 프로젝트 진행 중 한글파일의 양식을 이용해

기입한 값을 양식에 맞춰 삽입 후 출력할 수 있는 기능이 필요해 구현했습니다.

 

구현

1. 한글 양식 파일 얻기

우선 출력해야하는 양식이 다음과 같다고 예를 들겠습니다.

 

.

해당 양식에 맞춰 파일을 얻기 위해 "파일" > "다른 이름으로 저장하기" 를 해줍니다.

이때 파일 형식을 "서식 있는 인터넷 문서 (*. html)"로 변경해 주세요

 

 

저장된 폴더를 확인해 보면 다음과 같이 html , css 파일과 만약 이미지가 있었다면

이미지 파일도 함께 저장된 것을 확인할 수 있습니다.

 

2. HTML 실행시켜 보기

 

vscode에 파일이 저장된 폴더를 업로드합니다.

 

 

html 파일을 live server로 실행시키면 html에서 css와 이미지 파일을 잘 받아와

한글파일에서 본 양식 그대로 띄워지는 것을 확인할 수 있습니다.

 

(vscode에서 html 파일을 여는 방법은 다음 링크를 참조해 주세요.)

https://stajun.tistory.com/entry/Visual-Studio-Code-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EC%84%9C%EB%B2%84Live-Server-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

 

 

하지만 html 파일을 보게 되면 용량을 절약하기 위해 개행이 돼있지 않아 보기가 불편합니다 

 

 

이때 vscode의 확장자 prettier를 설치해 실행시켜 주면 보기 쉽습니다

prettier를 다운로드한 후 shift + alt + f를 눌러 주시면 됩니다.

(prettier를 다운로드하는 방법은 다음 링크를 참조해 주세요.)

https://milenote.tistory.com/29

 

3. 값을 넣을 태그 특정하기

저희가 기입해야 할 곳은 제목, 회사명, 작성자, 부서명, 연락처, 홈페이지 주소 이렇게 6개입니다.

기본적으로 기입돼 있는 값으로 검색해 해당 태그를 쉽게 찾을 수 있습니다.

 

 

 

저희가 기입한 값을 넣어야 하는 태그를 특정할 수 있는 id를 부여해 줍니다.

 

 

위와 같은 방식으로 다음과 같은 id값을 해당 태그에 주었습니다. 

제목 : title

회사명 : company

작성자 : writer

부서명 : department

연락처 : phone

홈페이지 주소 : url

 

4. 값을 기입하고 얻기

값들을 기입하고 얻을 수 있는 html, js 코드를 우선 만들겠습니다.

    제목 : <input type="text" name="title"><br/>
    회사명 : <input type="text" name="company"><br/>
    작성자 : <input type="text" name="writer"><br/>
    부서명 : <input type="text" name="department"><br/>
    연락처 : <input type="text" name="phone"><br/>
    홈페이지 주소 : <input type="text" name="url"><br/>

    <button onclick="confirmValue()">기입값 확인</button><br/>
    <!-- <button onclick="print()">출력</button><br/> -->

    <script>

        // DOM
        const title = document.querySelector('input[name="title"]');
        const company = document.querySelector('input[name="company"]');
        const writer = document.querySelector('input[name="writer"]');
        const department = document.querySelector('input[name="department"]');
        const phone = document.querySelector('input[name="phone"]');
        const url = document.querySelector('input[name="url"]');

        /** 기입 값 확인 */
        function confirmValue(){
            console.log(title.value);    
            console.log(company.value);    
            console.log(writer.value);    
            console.log(department.value);    
            console.log(phone.value);    
            console.log(url.value);    
        }
    </script>

 

 

위와 같이 코드를 작성하면 "기입값 확인" 버튼 클릭 시

기입한 값들을 콘솔창에 띄울 수 있습니다.

 

5. 기입 값 양식에 삽입 후 출력하기

이제 위에서 얻은 기입값들을 양식에 넣어주기 위해

양식 html 파일을 나의 js로 불러와 새로운 document를 생성해 줍니다.

(현재 저의 html 경로는 양식 html과 같은 경로에 있으므로 "./"를 사용했습니다.)

// 양식 html 불러오기
const template = "./template.html";
const win = window.open(template, '_blank');

 

불러온 document를 기준으로 태그를 찾고 해당 태그에 적절한 값을 삽입해 줍니다.

print 함수의 전체 코드는 다음과 같습니다.

function print(){

    // 양식 html 불러오기
    const template = "./template.html";
    const win = window.open(template, '_blank');

    win.onload = function() {
        // 특정 태그 불러오기
        const title_tag = win.document.getElementById('title');
        const company_tag = win.document.getElementById('company');
        const writer_tag = win.document.getElementById('writer');
        const department_tag = win.document.getElementById('department');
        const phone_tag = win.document.getElementById('phone');
        const url_tag = win.document.getElementById('url');

        // 특정한 태그에 값 삽입
        title_tag.innerText = title.value;
        company_tag.innerText = company.value;
        writer_tag.innerText = writer.value;
        department_tag.innerText = department.value;
        phone_tag.innerText = phone.value;
        url_tag.innerText = url.value;

        // 양식 프린트
        win.print();
    };
}

 

 

실행시킨 후 값을 입력하고 출력버튼을 누르면 다음과 같이

내가 기입한 값이 삽입된 양식을 볼 수 있습니다.