주피터 노트북 셀 실행결과 구글시트나 엑셀로 복사하기 How to copy/paste a dataframe from iPython into Google Sheets or Excel?

Photo by bongkarn thanyakij from Pexels

 

주피터 노트북 사용시 셀 실행결과로 나온 테이블 등을 엑셀 등에 복사하고자하는 경우, 다음과 같이 테이블 형태로 들어가지 않는 경우 처리방법에 대해 알아보자. 

 

주피터 노트북은 크롬 등의 브라우저에서 구동이 되므로, 셀을 복사하고 클립보드에 붙여넣는 자바스크립트를 만들 수 있다. 다음의 자바스크립트를 크롬 등의 북마크에 저장하고 노트북이 구동되는 페이지에서 실행하면 된다. 아래를 보자.

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

 

크롬의 경우 북마크 관리자는 다음의 단축키로 오픈할 수 있다. 

크롬 단축키 https://support.google.com/chrome/answer/157179?hl=ko

북마크 관리자를 오픈한 후 우측 상단 버튼을 눌러 Add new bookmark 를 선택한다.

 

URL 부분에 앞에서 복사한 자바스크립트를 붙여넣고, 이름을 적당히 입력한 후 저장한다.

 

이제 노트북이 실행되고 있는 브라우저 탭으로 이동해보자. 북마크를 실행하기 전에는 아래에서 보시다시피 결과창 좌측에 특별한 아이콘이 보이지 않는다.

 

다음과 같이 북마크를 실행시킨다.

 

그 후 결과창을 확인해보면, 앞서 보이지 않았던 복사 아이콘이 생겼음을 알 수 있다. 해당 아이콘을 클릭하면 결과창의 내용이 클립보드에 복사된다.

 

엑셀 등으로 이동하여 붙여넣으면 다음과 같이 온전한 테이블의 형태를 유지한채 붙여넣기가 이루어지는 것을 볼 수 있다.

 

아래는 디코딩된 소스입니다.

(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

 

원문출처 https://stackoverflow.com/questions/44229820/how-can-i-copy-to-the-clipboard-the-output-of-a-cell-in-a-jupyter-notebook