html태그까지 복사하기(javascript clipboard + html tag)

jsp

...
<button type = "button" onClick = "fn_copyTable();"> 복사하기 </button>
...
<table id="resultTable">
	<thead>
		<tr>
        	<th>날짜</th>
            <th>신청자 수</th>
		</tr>
	</thead>
	<tbody>
    	<tr>
        	<td>2022년 05월 </td>
            <td>2</td>
		</tr>
        <tr>
        	<td>2022년 06월 </td>
            <td>3</td>
		</tr>
        <tr>
        	<td>2022년 07월 </td>
            <td>4</td>
		</tr>
	</tbody>
</table>
...​

... ...

날짜	신청자 수
2022년 05월	2
2022년 06월	3
2022년 07월	4

...

 

 

js

function fn_copyTable(){
	var myCopyArea = document.getElementById("resultTable");
	var selection = window.getSelection();
	var range = document.createRange();
	range.selectNodeContents(myCopyArea);
	selection.removeAllRanges();
	selection.addRange(range); //table영역 드래그 한 효과
	document.execCommand('copy'); //clipboard copy
}


//복사는 되는데 테이블 테두리까지는 안됨.
//function fn_copyTable(){
//	var myCopyArea = document.getElementById("resultTable").innerText;
//	console.log("myCopyArea : "+ myCopyArea);
//	//임시 Textarea생성
//	var textArea = document.createElement('textarea');
//	//textarea추가
//	document.body.appendChild(textArea);
//	//textarea의 내부값으로 myCopyArea설정
//	textArea.value = myCopyArea;
//	//textarea선택 및 복사
//	textArea.select();
//	document.execCommand('copy');
//	//textarea제거
//	document.body.removeChild(textArea);
//}

 

[검색어]

자바스크립트 clonenode

createTextRange copy

 

[코드]

https://hi-dev.tistory.com/5

텍스트 복사 / 붙여넣기 자바스크립트

 

* IE용과  크롬으로 코드를 나눠서 작성해야하는 것 같은데

나는 어차피 크롬에서 혼자쓸 기능이라 이렇게 하고 끝냄

 

* 복사하기 버튼 누르고 

한글문서에 "원본 형식 유지" 선택 후 붙여넣기를 하면

테이블 모양대로 복사가 된다.