前端react，vue导出word的几种方法（可以导出图片）

方法一：mhtml-to-word导出word

方法一详情请看这里

1.安装环境

npm install mhtml-to-word

2.引入使用

import { exportWord } from mhtml-to-word

3.直接使用（浏览器环境下的使用，node环境下请点击方法一详情）

这里我们给出百度模板的使用演示

（1）引入我们在详情链接中的百度模板的文件

import  baidu from "../../../api/baiduTemplatePro"

（2）使用百度模板进行转化并调用（注释中有插入图片的注意事项）

var model = `
<div>
  <%for(var i=0;i<list.length;i++){%>
        <p><%=list[i]%></p>
        <img width="500"
         src="http://pic13.nipic.com/20110409/7119492_114440620000_2.jpg"/>
  <%}%>
  </div>
  `  
  /*
  注意这里插入图片目前只能使用图片的地址插入，实验了一下base64不行
	<img>标签中写css样式无法生效，可以使用width和height去修改图片的导出大小
*/
  //百度模板的具体语法请看详情链接
var html = baidu.template(model,data) //进行转化

exportWord({
            mhtml: html,  //将转化好的内容放到mhtml这个参数中
            data: {title: "exportword"},
            filename: "exportTest",
            style: "span{ font-size:30px; }"
        })

使用一定要看最上面的方法详情哦ovo

补充：这个插件主要使用Blob对象和FileSaver进行实现
解析博文

方法二(Xdoc.js)

方法二详情点击这里
一个在线的云js库，还是很强大的

方法三（html-docx-js）

这个方法不是十分推荐，因为我们可以看到他已经三年没有更新了

点击这就去他的官网
使用方法：
（1）安装环境

npm install html-docx-js

（2）引入

import htmlDocx from "html-docx-js"

（3）直接使用

var converted = htmlDocx.asBlob(content);
saveAs(converted, 'test.docx');

但我在这一步这里出现了bug，报错的意思大概是fs库中的某一个不是函数，去查了一下可能是因为一些版本的问题，大家可以尝试一下，也可能是我个人的一些问题