React로 Word 파일을 내보내는 방법

1단계: 종속성 설치

먼저 몇 가지 필수 종속성 패키지를 설치해야 합니다. React 애플리케이션의 루트 디렉터리에서 터미널을 열고 다음 명령을 실행합니다.

npm install docxtemplater --save

그러면 Word 문서를 생성하고 편집하는 기능을 제공하는 라이브러리가 설치됩니다 docxtemplater.

2단계: 내보내기 버튼 만들기

React 구성 요소에서는 사용자가 버튼을 클릭하면 Word 파일 내보내기가 실행되는 버튼을 만들어야 합니다. 구성 요소에 다음 코드를 추가합니다.

import { saveAs } from 'file-saver';
import Docxtemplater from 'docxtemplater';

class ExportButton extends React.Component {
  exportWord = () => {
    const content = '这是要导出的内容';

    const doc = new Docxtemplater();
    doc.load(content);
    doc.render();

    const output = doc.getZip().generate({ type: 'blob' });
    saveAs(output, '导出的文件.docx');
  };

  render() {
    return (
      <button onClick={this.exportWord}>导出Word</button>
    );
  }
}

위 코드에서는 file-saver라이브러리를 사용하여 생성된 Word 문서를 저장하고, docxtemplater라이브러리를 사용하여 Word 문서를 생성하고 편집했습니다.

3단계: 코드 완성

다음은 전체 구성 요소의 전체 코드 예입니다.

import { saveAs } from 'file-saver';
import Docxtemplater from 'docxtemplater';

class ExportButton extends React.Component {
  exportWord = () => {
    const content = '这是要导出的内容';

    const doc = new Docxtemplater();
    doc.load(content);
    doc.render();

    const output = doc.getZip().generate({ type: 'blob' });
    saveAs(output, '导出的文件.docx');
  };

  render() {
    return (
      <button onClick={this.exportWord}>导出Word</button>
    );
  }
}

결론적으로

라이브러리를 사용하면 docxtemplaterReact 애플리케이션에서 Word 파일을 내보내는 기능을 쉽게 구현할 수 있습니다. 단 몇 줄의 코드만으로 내보내기 버튼이 있는 구성 요소를 만들고 데이터를 Word 문서로 내보낼 수 있습니다.