[javascript] Draft.js에서 텍스트 에디터의 PDF 내보내기 기능 구현하기

24 Nov 2023

javascript

Draft.js는 React 기반의 텍스트 에디터 라이브러리로, 전문적인 텍스트 편집 기능을 웹 애플리케이션에 추가할 수 있습니다. 이번에는 Draft.js를 사용하여 사용자가 작성한 텍스트를 PDF로 내보낼 수 있는 기능을 구현하는 방법을 알아보겠습니다.

라이브러리 설치

먼저, 프로젝트에 Draft.js를 설치해야 합니다. npm을 이용하여 다음 명령어를 실행하여 설치할 수 있습니다:

npm install draft-js

PDF 생성 라이브러리 선택

PDF 내보내기 기능을 구현하기 위해서는 PDF 생성을 위한 라이브러리를 선택해야 합니다. 여러 가지 라이브러리 중에서는 jspdf와 html2pdf가 널리 사용되고 있는데, 이 중에서 jspdf를 사용하여 PDF를 생성하는 방법을 다루겠습니다.

npm install jspdf

Draft.js 에디터 생성

Draft.js 에디터를 생성하기 위해 필요한 컴포넌트를 작성합니다. Editor 컴포넌트와 함께 EditorState 객체를 사용하여 에디터의 상태를 관리합니다.

import React, { useState } from 'react';
import { Editor, EditorState } from 'draft-js';

function MyEditor() {
  const [editorState, setEditorState] = useState(
    EditorState.createEmpty()
  );

  const handleEditorChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  return (
    <Editor
      editorState={editorState}
      onChange={handleEditorChange}
    />
  );
}

PDF 내보내기 기능 구현

PDF 내보내기 버튼을 클릭하면 현재 텍스트를 PDF 파일로 내보내는 기능을 구현해보겠습니다. 이를 위해 아래와 같이 jspdf 라이브러리를 사용할 수 있습니다.

import jsPDF from 'jspdf';

function MyEditor() {
  // ...

  const handleExportPDF = () => {
    const content = editorState.getCurrentContent().getPlainText();
    const pdf = new jsPDF();
    pdf.text(content, 10, 10);
    pdf.save('my_document.pdf');
  };

  return (
    <>
      <Editor
        editorState={editorState}
        onChange={handleEditorChange}
      />
      <button onClick={handleExportPDF}>PDF 내보내기</button>
    </>
  );
}

위 코드에서는 현재 텍스트 에디터의 내용을 문자열로 추출하여 jspdf를 사용하여 PDF에 해당 내용을 출력하고, save 메소드를 사용하여 사용자에게 파일을 다운로드할 수 있게 합니다.

결론

이제 Draft.js를 사용하여 텍스트 에디터의 PDF 내보내기 기능을 구현하는 방법을 알아보았습니다. 이를 응용하여 추가적인 기능을 구현하거나, 다른 PDF 생성 라이브러리를 사용할 수도 있습니다. 자세한 내용은 jspdf 공식 문서를 참조해보시기 바랍니다.

참고 자료

Draft.js 공식 문서: https://draftjs.org/
jsPDF 공식 문서: https://github.com/MrRio/jsPDF