在reactjs应用程序中生成和下载docx文件

npm install docxtemplater file-saver

Hello {name}! This is a sample docx template.

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

class DocxGenerator extends React.Component {
  generateDocx = () => {
    // 读取模板文件
    const templateFile = require('./template.docx');
    const templateContent = new Uint8Array(templateFile);

    // 创建docxtemplater实例
    const doc = new Docxtemplater();
    doc.loadZip(templateContent);

    // 设置要填充的数据
    const data = {
      name: 'John Doe',
    };
    doc.setData(data);

    // 生成docx文件
    doc.render();

    // 将生成的文件保存到本地
    const generatedFile = doc.getZip().generate({ type: 'blob' });
    saveAs(generatedFile, 'generated.docx');
  };

  render() {
    return (
      <div>
        <button onClick={this.generateDocx}>生成并下载docx文件</button>
      </div>
    );
  }
}

export default DocxGenerator;

import React from 'react';
import DocxGenerator from './DocxGenerator';

function App() {
  return (
    <div>
      <h1>React App</h1>
      <DocxGenerator />
    </div>
  );
}

export default App;