htmledit_views">
一 前提
应项目需求，需要把前端生成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 是需要下载的内容的容器IDconst 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
