方法一: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库中的某一个不是函数,去查了一下可能是因为一些版本的问题,大家可以尝试一下,也可能是我个人的一些问题

Logo

前往低代码交流专区

更多推荐