前端react,vue导出word的几种方法(可以导出图片)
mhtml-to-word导出word:方法详情请看这里1.安装环境npm install mhtml-to-word2.引入使用import { exportWord } from mhtml-to-word3.直接使用(浏览器环境下的使用,node环境下请点击方法一详情)这里我们给出百度模板的使用演示(1)引入我们在详情链接中的百度模板的文件importbaidu f...
·
方法一: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库中的某一个不是函数,去查了一下可能是因为一些版本的问题,大家可以尝试一下,也可能是我个人的一些问题
更多推荐
已为社区贡献1条内容
所有评论(0)