前端实现word文档的生成和下载

菜鸟一只请包涵

于 2025-03-05 19:21:42 发布

阅读量697

点赞数 5

分类专栏：通用文章标签： html word

本文链接：https://blog.csdn.net/WQearl/article/details/146050550

版权

通用专栏收录该内容

2 篇文章

订阅专栏

一前提

应项目需求，需要把前端生成word文档并下载。此项目我使用的是vue框架。本篇文章主要是记录自己在实现中遇到的问题以及最终使用方式。

二实现方式

我的方式是将 html 转为word文档并下载。现在网上最常见的是使用 html-docx-js 配合 file-saver 使用，但是我在使用的时候报错。一查，是因为html-docx-js构建出来的代码包括with语句，而在主流的现代框架中（vue/react/angular）中使用不了（它们目前的构建工具都默认启用了严格模式）。而后，我又看到一个 html-docx-js-typescript 库，便试了一下。对于简单的word还是可以的。原文链接如下：插件推荐 | html文本转docx文档 - 简书

三开始使用

1.安装依赖

yarn add html-docx-js-typescript
yarn add file-saver
yarn add @types/file-saver

2.使用

// 导入方法
import {saveAs} from "file-saver";
import {asBlob} from 'html-docx-js-typescript';

// 下载
const handleOk = async () => {
// htmlId 是需要下载的内容的容器ID
  const content = document.getElementById('htmlId')?.innerHTML;
  if (content) {
    try {
         const htmlString = `<!DOCTYPE html>
              <html lang="en">
              <head>
                <meta content="text/html;charset=utf-8" />
              </head>
              <body>
                <div>
                    ${content}
                </div>
              </body>
              </html>`;

      asBlob(htmlString).then((data): any => {
        saveAs(data, '下载word.docx') // 保存为docx文件
      });

    } catch (error) {
      console.log("文件下载失败：",error);
    }
  }
};

// 这是要下载的文档内容，根据自己的需求写即可。放到自己的代码中。
<div id="htmlId" style="color: red;font-size: 20px">
    <div>这是测试的文档内容</div>
</div>

效果如下：

四其他方式（docx.js）

后来，我发现，docx.js 好像也可以进行word文件生成和下载。只不过这不是将html转为word，而是自己根据实际内容利用docx.js 中特定的方式去生成word（通过编程方式创建 Word 文档）。并且docx.js功能更强大，可以生成各种复杂格式的文档，比如：支持表格、图片、页眉、页脚等元素的添加。有兴趣的同学可以试一下：

具体使用方式见docx.js 官网：Getting started with React Grid component | Syncfusion