React实现生成和导出Word文档的方法详解

npx create-react-app word-export-example
cd word-export-example
npm install mammoth

import React from 'react';
class WordExport extends React.Component {
  render() {
    return (
      <div>
        <h1>导出至Word文档示例</h1>
        <p>这是一个简单的示例，演示如何在React中生成并导出Word文档。</p>
      </div>
    );
  }
}
export default WordExport;

import React from 'react';
import mammoth from 'mammoth';
class WordExport extends React.Component {
  exportToWord = () => {
    const { content } = this.props;
    mammoth.convertToHtml(content)
      .then((result) => {
        const blob = new Blob([result.value], { type: 'application/msword' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'exported-document.docx';
        a.click();
        URL.revokeObjectURL(url);
      })
      .catch((error) => {
        console.error('导出失败', error);
      });
  }
  render() {
    return (
      <div>
        <h1>导出至Word文档示例</h1>
        <p>这是一个简单的示例，演示如何在React中生成并导出Word文档。</p>
        <button onClick={this.exportToWord}>导出至Word</button>
      </div>
    );
  }
}
export default WordExport;

import React from 'react';
import WordExport from './WordExport';
function App() {
  const content = `
    <h2>这是一个导出的标题</h2>
    <p>这是一些要导出的内容。</p>
    <ul>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
    </ul>
  `;
  return (
    <div>
      <WordExport content={content} />
    </div>
  );
}
export default App;

exportToWord = () => {
  const { content } = this.props;
  mammoth.convertToHtml(content)
    .then((result) => {
      const blob = new Blob([result.value], { type: 'application/msword' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'exported-document.docx';
      a.click();
      URL.revokeObjectURL(url);
    })
    .catch((error) => {
      console.error('导出失败', error);
    });
}

const blob = new Blob([result.value], { type: 'application/msword' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'exported-document.docx';
a.click();
URL.revokeObjectURL(url);

const { dynamicContent } = this.props; // 从props中获取动态内容
exportToWord = () => {
  mammoth.convertToHtml(dynamicContent)
    // ...
}

import React from 'react';
import WordExport from './WordExport';
import { Bar } from 'react-chartjs-2';
function App() {
  const chartData = {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: '数据',
      data: [12, 19, 3, 5, 2],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
      ],
      borderWidth: 1,
    }],
  };
  return (
    <div>
      <h1>导出数据报告示例</h1>
      <Bar data={chartData} />
      <WordExport content="<h2>数据报告</h2>" />
    </div>
  );
}
export default App;

import React from 'react';
import WordExport from './WordExport';
import Handlebars from 'handlebars';
function App() {
  // 定义模板字符串
  const template = `
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  `;
  // 使用Handlebars编译模板
  const compiledTemplate = Handlebars.compile(template);
  // 数据
  const data = {
    title: '自定义模板示例',
    content: '这是一个使用自定义模板的示例。',
  };
  // 渲染模板
  const renderedHtml = compiledTemplate(data);
  return (
    <div>
      <h1>使用自定义模板示例</h1>
      <div dangerouslySetInnerHTML={{ __html: renderedHtml }} />
      <WordExport content={renderedHtml} />
    </div>
  );
}
export default App;