![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
Photo by bongkarn thanyakij from Pexels
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
주피터 노트북 사용시 셀 실행결과로 나온 테이블 등을 엑셀 등에 복사하고자하는 경우, 다음과 같이 테이블 형태로 들어가지 않는 경우 처리방법에 대해 알아보자.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
주피터 노트북은 크롬 등의 브라우저에서 구동이 되므로, 셀을 복사하고 클립보드에 붙여넣는 자바스크립트를 만들 수 있다. 다음의 자바스크립트를 크롬 등의 북마크에 저장하고 노트북이 구동되는 페이지에서 실행하면 된다. 아래를 보자.
javascript:(function%20()%20%7B%20function%20SelectText(element)%20%7B%20var%20range%3B%20var%20selection%3B%20if%20(document.body.createTextRange)%20%7B%20range%20%3D%20document.body.createTextRange()%3B%20range.moveToElementText(element)%3B%20range.select()%3B%20copy2clipboard(range.text%2C%20element.innerHTML)%3B%20document.getSelection().removeAllRanges()%3B%20%7D%20else%20if%20(window.getSelection)%20%7B%20selection%20%3D%20window.getSelection()%3B%20range%20%3D%20document.createRange()%3B%20range.selectNodeContents(element)%3B%20selection.removeAllRanges()%3B%20selection.addRange(range)%3B%20copy2clipboard(selection.toString()%2C%20element.innerHTML)%3B%20selection.removeAllRanges()%3B%20%7D%20%7D%3B%20function%20copy2clipboard(text%2C%20html)%20%7B%20function%20listener(e)%20%7B%20e.clipboardData.setData('text%2Fplain'%2C%20text)%3B%20e.clipboardData.setData('text%2Fhtml'%2C%20html)%3B%20e.preventDefault()%3B%20%7D%20document.addEventListener('copy'%2C%20listener)%3B%20document.execCommand('copy')%3B%20document.removeEventListener('copy'%2C%20listener)%3B%20%7D%3B%20%24('%23notebook-container').on('mouseenter'%2C%20'.input%2C%20.output_wrapper'%2C%20function%20()%20%7B%20if%20(%24(this).find('i%3Alast').length)%20%7B%20%24(this).find('i%3Alast').show()%3B%20%7D%20else%20%7B%20%24(this).css(%7B%20'position'%3A%20'relative'%20%7D).append(%24('%3Ci%20style%3D%22position%3Aabsolute%3B%20top%3A7px%3B%20left%3A%207px%3B%22%20class%3D%22fa-copy%20fa%22%3E%3C%2Fi%3E').on('click'%2C%20function%20()%20%7B%20SelectText(%24(this).parent().find('.input_area%2C%20.output')%20%5B0%5D)%3B%20%24(this).slideUp()%3B%20%7D))%3B%20%7D%20%7D)%3B%20%24('%23notebook-container').on('mouseleave'%2C%20'.input%2C%20.output_wrapper'%2C%20function%20()%20%7B%20%24(this).find('i%3Alast').hide()%3B%20%7D)%3B%20%7D)%20()%3B
크롬의 경우 북마크 관리자는 다음의 단축키로 오픈할 수 있다.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
크롬 단축키 https://support.google.com/chrome/answer/157179?hl=ko
북마크 관리자를 오픈한 후 우측 상단 버튼을 눌러 Add new bookmark 를 선택한다.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
URL 부분에 앞에서 복사한 자바스크립트를 붙여넣고, 이름을 적당히 입력한 후 저장한다.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
이제 노트북이 실행되고 있는 브라우저 탭으로 이동해보자. 북마크를 실행하기 전에는 아래에서 보시다시피 결과창 좌측에 특별한 아이콘이 보이지 않는다.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
다음과 같이 북마크를 실행시킨다.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
그 후 결과창을 확인해보면, 앞서 보이지 않았던 복사 아이콘이 생겼음을 알 수 있다. 해당 아이콘을 클릭하면 결과창의 내용이 클립보드에 복사된다.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
엑셀 등으로 이동하여 붙여넣으면 다음과 같이 온전한 테이블의 형태를 유지한채 붙여넣기가 이루어지는 것을 볼 수 있다.
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
아래는 디코딩된 소스입니다.
(function () { function SelectText(element) { var range; var selection; if (document.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(element); range.select(); copy2clipboard(range.text, element.innerHTML); document.getSelection().removeAllRanges(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); copy2clipboard(selection.toString(), element.innerHTML); selection.removeAllRanges(); } }; function copy2clipboard(text, html) { function listener(e) { e.clipboardData.setData('text/plain', text); e.clipboardData.setData('text/html', html); e.preventDefault(); } document.addEventListener('copy', listener); document.execCommand('copy'); document.removeEventListener('copy', listener); }; $('#notebook-container').on('mouseenter', '.input, .output_wrapper', function () { if ($(this).find('i:last').length) { $(this).find('i:last').show(); } else { $(this).css({ 'position': 'relative' }).append($('<i style=\"position:absolute; top:7px; left: 7px;\" class=\"fa-copy fa\"></i>').on('click', function () { SelectText($(this).parent().find('.input_area, .output') [0]); $(this).slideUp(); })); } }); $('#notebook-container').on('mouseleave', '.input, .output_wrapper', function () { $(this).find('i:last').hide(); }); }) ();
북마크는 위의 소스에서 개행문자을 없애고 encodeURIComponent() 함수 싫행을 통해 생성한 것이다. 아래는 북마크를 여러줄로 나열한 모습이다.
javascript:(function%20()%20%7B%20function%20SelectText(element)%20%7B%20var%20range%3B%20var%20selection%3B%20if%20(document.body.createTextRange)%20%7B%20range%20%3D%20document.body.createTextRange()%3B%20range.moveToElementText(element)%3B%20range.select()%3B%20copy2clipboard(range.text%2C%20element.innerHTML)%3B%20document.getSelection().removeAllRanges()%3B%20%7D%20else%20if%20(window.getSelection)%20%7B%20selection%20%3D%20window.getSelection()%3B%20range%20%3D%20document.createRange()%3B%20range.selectNodeContents(element)%3B%20selection.removeAllRanges()%3B%20selection.addRange(range)%3B%20copy2clipboard(selection.toString()%2C%20element.innerHTML)%3B%20selection.removeAllRanges()%3B%20%7D%20%7D%3B%20function%20copy2clipboard(text%2C%20html)%20%7B%20function%20listener(e)%20%7B%20e.clipboardData.setData('text%2Fplain'%2C%20text)%3B%20e.clipboardData.setData('text%2Fhtml'%2C%20html)%3B%20e.preventDefault()%3B%20%7D%20document.addEventListener('copy'%2C%20listener)%3B%20document.execCommand('copy')%3B%20document.removeEventListener('copy'%2C%20listener)%3B%20%7D%3B%20%24('%23notebook-container').on('mouseenter'%2C%20'.input%2C%20.output_wrapper'%2C%20function%20()%20%7B%20if%20(%24(this).find('i%3Alast').length)%20%7B%20%24(this).find('i%3Alast').show()%3B%20%7D%20else%20%7B%20%24(this).css(%7B%20'position'%3A%20'relative'%20%7D).append(%24('%3Ci%20style%3D%22position%3Aabsolute%3B%20top%3A7px%3B%20left%3A%207px%3B%22%20class%3D%22fa-copy%20fa%22%3E%3C%2Fi%3E').on('click'%2C%20function%20()%20%7B%20SelectText(%24(this).parent().find('.input_area%2C%20.output')%20%5B0%5D)%3B%20%24(this).slideUp()%3B%20%7D))%3B%20%7D%20%7D)%3B%20%24('%23notebook-container').on('mouseleave'%2C%20'.input%2C%20.output_wrapper'%2C%20function%20()%20%7B%20%24(this).find('i%3Alast').hide()%3B%20%7D)%3B%20%7D)%20()%3B |
'프로그래밍 Programming' 카테고리의 다른 글
주피터노트북 디렉토리 이동 명령어 Built-in magic commands %cd (0) | 2020.03.15 |
---|---|
초보자를 위한 리눅스 tree 명령어 사용법 Linux ‘tree Command’ Usage Examples for Beginners (0) | 2020.03.15 |
신경망의 기본 구조 (0) | 2020.03.05 |
Dash and Plotly 를 활용한 인터랙티브 시각화 Interactive Visualization with Dash and Plotly (0) | 2020.03.04 |
꼭 알아둬야할 4가지 놀라운 파이썬 트릭 4 Uncommon Python Tricks You Should Learn (0) | 2020.02.15 |
댓글을 사용할 수 없습니다.