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

一  前提

        应项目需求，需要把前端生成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 = `
              
              
                
              
              
                

                    ${content}
                
              
              `;

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

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

// 这是要下载的文档内容，根据自己的需求写即可。放到自己的代码中。

    
这是测试的文档内容

效果如下：

四 其他方式（docx.js）

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

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