가라멜의 달달한 세상 탐방

웹에서 클리보드 카피 기능 이용하기

엑셀 양식을 받아서 사용자에게 업로드 하는 기능을 개발하려고 했는데, 

양식을 다운받자 마자 보안파일이 되어버려 복사/붙여넣기가 불가능 했다.

따라서 차선책으로 양식 복사 버튼을 누른 뒤, 양식을 클립보드에 복사하여 사용자가 엑셀파일을 열고,

양식을 붙여넣기 한 뒤 데이터를 작성하여 그것을 다시 복사하여 웹에서 붙여넣기로 업로드 하는 방식으로 하기로 하였다.

아래는 엑셀 붙여넣기용 소스

function fnCopyForm(){
    var text = '<table style="table-layout:fixed;"  border="1" bordercolor="gray">'
                + '<colgroup>'
                + '<col style="width:200px" /> '
                + '<col style="width:250px" />'
                + '<col style="width:100px" />'
                + '<col style="width:100px" />'
                + '<col style="width:200px" />'
                + '</colgroup>'
                + '<thead>'
                + '<tr height=28 style="mso-height-source:userset;height:21.0pt">'
                + '<td colspan=5 height=28 class=xl6514994 width=850 style="height:21.0pt; width:638pt">실제 데이터 부분만 복사해서 붙여넣기 해주세요!</td>'
                + '</tr>'
                + '<tr style="mso-height-source:userset;height:24.75pt"    backgroundcolor=yellow>'
                + '<th>[예시]</th>'
                + '<th>[예시]</th>'
                + '<th>[예시]</th>'
                + '<th>[예시]</th>'
                + '<th>[예시]</th>'
                + '</tr>'
                + '<tr style="mso-height-source:userset;height:24.0pt" backgroundcolor=gray>'
                + '<th>a</th>'
                + '<th>b</th>'
                + '<th>c</th>'
                + '<th>d</th>'
                + '<th>e/th>'
                + '</tr>'
                + '</thead>'
                + '<tbody>'
                + '</tbody>'
                + '</table>';
    $("#excelCopyForm").val(text);
    var copyArea = document.createElement("textarea");
    document.body.appendChild(copyArea);
    copyArea.value = text;
    copyArea.select();
    document.execCommand("copy");
    document.body.removeChild(copyArea);
    alert("복사되었습니다. 엑셀파일에 붙여넣기해주세요.");
}
 
 

엑셀에 스타일을 먹인 양식을 쉽게 텍스트화 하는 방법은,

엑셀시트에 원하는 양식을 만든 뒤 다른이름으로 저장 - > HTML 파일로 저장 한 뒤 소스보기를 통해 추출하면 된다.

위의 소스같은 경우 스타일은 들어가있지만, 테이블 소스만 따로 빼와서 스타일까지 적용되어 있진 않다.