使用 JavaScript 将 textarea 内容导出为 DOCX 文件-js教程-PHP中文网

使用 JavaScript 将 textarea 内容导出为 DOCX 文件

心靈之曲

发布： 2025-09-14 19:15:01

原创

646人浏览过

使用 javascript 将 textarea 内容导出为 docx 文件

本文档将指导你如何使用 JavaScript 和 docx 库，将 HTML textarea 中的内容导出为可下载的 DOCX 文件。我们将提供详细的代码示例，包括使用 docx 库生成 DOCX 文件，以及使用 JavaScript 创建下载链接。此外，我们还将提供一个 React 组件示例，以便在 React 应用中使用。

使用 docx 库生成 DOCX 文件

docx 是一个用于以编程方式创建 DOCX 文件的 JavaScript 库。要使用它，首先需要通过 npm 或 yarn 安装它：

npm install docx

登录后复制

或者

yarn add docx

登录后复制

安装完成后，就可以在 JavaScript 代码中引入它，并使用它来创建 DOCX 文件。以下是一个简单的示例，展示如何从 textarea 获取内容，并将其添加到 DOCX 文件中：

立即学习“Java免费学习笔记（深入）”；

import { Document, Packer, Paragraph } from "docx";

async function saveToDocx(content) {
  // 创建一个新的文档
  const doc = new Document({
    sections: [{
      children: [
        new Paragraph(content)
      ]
    }]
  });

  // 生成 DOCX 文件
  const blob = await Packer.toBlob(doc);

  return blob;
}

登录后复制

这段代码首先导入了 docx 库中的 Document、Packer 和 Paragraph 类。然后，它定义了一个名为 saveToDocx 的异步函数，该函数接收一个字符串参数 content，表示要添加到 DOCX 文件中的内容。

在函数内部，首先创建了一个新的 Document 对象，该对象表示 DOCX 文件。然后，创建了一个包含一个 Paragraph 对象的 section。Paragraph 对象使用传入的 content 创建。

最后，使用 Packer.toBlob(doc) 方法将 Document 对象转换为 Blob 对象。toBlob 方法返回一个 Promise，因此需要使用 await 关键字等待 Promise 完成。该函数返回 Blob 对象。

创建下载链接

生成 DOCX 文件的 Blob 对象后，需要创建一个下载链接，以便用户可以下载该文件。以下是一个示例，展示如何创建下载链接：

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

function downloadContent(content, fileName, fileExtension) {
  const element = document.createElement('a');
  const url = URL.createObjectURL(content);
  element.href = url;
  element.download = `${fileName}.${fileExtension}`;
  element.click();
}

登录后复制

这段代码定义了一个名为 downloadContent 的函数，该函数接收三个参数：

content: 要下载的 Blob 对象。
fileName: 下载文件的名称。
fileExtension: 下载文件的扩展名。

在函数内部，首先创建一个 <a> 元素，并将其 href 属性设置为 Blob 对象的 URL。然后，将 download 属性设置为文件名和扩展名。最后，调用 click() 方法模拟点击链接，从而触发下载。

完整示例

以下是一个完整的示例，展示如何将 textarea 中的内容导出为 DOCX 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Export Textarea to DOCX</title>
  <script src="https://unpkg.com/docx@7.7.0/build/index.js"></script>
</head>
<body>
  <textarea id="content" rows="4" cols="50">
    This is some text to be exported to a DOCX file.
  </textarea>
  <button onclick="exportToDocx()">Export to DOCX</button>

  <script>
    async function saveToDocx(content) {
      const { Document, Packer, Paragraph, SectionType } = docx;

      const doc = new Document({
        sections: [{
          properties: {
            type: SectionType.CONTINUOUS,
          },
          children: [
            new Paragraph(content)
          ]
        }]
      });

      const blob = await Packer.toBlob(doc);

      return blob;
    }

    function downloadContent(content, fileName, fileExtension) {
      const element = document.createElement('a');
      const url = URL.createObjectURL(content);
      element.href = url;
      element.download = `${fileName}.${fileExtension}`;
      element.click();
    }

    async function exportToDocx() {
      const content = document.getElementById("content").value;
      const blob = await saveToDocx(content);
      downloadContent(blob, "output", "docx");
    }
  </script>
</body>
</html>

登录后复制

在这个例子中，我们直接通过CDN引入了docx。注意，实际使用时，推荐通过npm安装并import，如上面的例子所示。

React 组件示例

以下是一个 React 组件示例，展示如何在 React 应用中使用上述代码：

import React, { useState } from 'react';
import { Document, Packer, Paragraph } from "docx";

const toDocxBlob = async (value: string) => {
  const document = new Document({
    sections: [
      {
        children: [new Paragraph({ text: value })]
      }
    ]
  });

  const blob = await Packer.toBlob(document)
  return blob
}

const downloadContent = (content: Blob, fileName: string, fileExtension: string) => {
  const element = document.createElement('a')
  const url = URL.createObjectURL(content)
  element.href = url
  element.download = `${fileName}${fileExtension}`
  element.click()
}


const Form = () => {
  const [text, setText] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const blob = await toDocxBlob(text);
    downloadContent(blob, 'file', 'docx')
  };

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        rows={4}
        placeholder="Enter your text"
        value={text}
        onChange={handleChange}
      />
      <button type="submit">
        Download in docx format
      </button>
    </form>
  );
};

export default Form;

登录后复制

这个组件包含一个 textarea 和一个按钮。当用户在 textarea 中输入文本并单击按钮时，该文本将被导出为 DOCX 文件。

注意事项

确保已正确安装 docx 库。
在生产环境中，建议对用户输入进行验证，以防止恶意代码注入。
可以根据需要自定义 DOCX 文件的样式和内容。
如果需要更复杂的 DOCX 文件结构，可以查阅 docx 库的官方文档。

总结

本文档介绍了如何使用 JavaScript 和 docx 库，将 HTML textarea 中的内容导出为可下载的 DOCX 文件。我们提供了详细的代码示例，包括使用 docx 库生成 DOCX 文件，以及使用 JavaScript 创建下载链接。此外，我们还提供了一个 React 组件示例，以便在 React 应用中使用。希望本文档能够帮助你解决相关问题。

以上就是使用 JavaScript 将 textarea 内容导出为 DOCX 文件的详细内容，更多请关注php中文网其它相关文章！