React ) window.print() 사용 (현재창, 새창 코드)

print 기능을 이용하게 되어 정리할 겸 기록~

컴포넌트 전체코드

import React, { useRef, useState } from 'react';

const View = ({history}) => {
  const printRef = useRef();

  const onClickPrint = () => {
    // 현재창에서 바로 열기 => 새로고침 필요
    //let printContent = printRef.current.innerHTML;
    // let originalContent = document.body.innerHTML;
    // console.log(printContent, originalContent);
    // document.body.innerHTML = printContent;
    // window.print();
    // document.body.innerHTML = originalContent;
    // history.go(0);

    // 새창에서 열기 => 새로고침 필요X
    let printContent = printRef.current;
    let windowObj = window.open(
      '',
      'Print',
      'width=1350, height=800, toolbars=no, scrollbars=no, status=no, resizable=no'
    );
    windowObj.document.writeln(printContent.innerHTML);
    windowObj.document.close();
    windowObj.focus();
    windowObj.print();
    windowObj.close();
  };
  const onClickDownload = () => {};
  return (
    <div>
      <Button onClick={onClickPrint} text="프린트" />
      <ul ref={printRef}>
        {[1, 2, 3, 4].map((el) => (
          <li key={el}>{el}hi!</li>
        ))}
      </ul>
    </div>
  );
};

export default View;

• 주의할 점 : react는 spa이기 때문에 document.body의 innerHTML을 변경해놓게 되면 새로고침을 해야한다. 하지만 새로고침을 하면 state는 초기값으로 돌아가게 되는데 이를 원치 않을 경우, 현재창이 아닌 새창에서 열기를 하면 된다. 그럼 현재의 돔트리에는 아무 수정이 없기 때문에 괜찮음!