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

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

导出Word的两种方式
导出Word有两种方式,分别是前端和后端这两种方式在实际开发中根据实际需要会选择不同的方式方式对比: 前端导出: 优点:简单,快捷,对于样式的设定也比较方便缺陷:只可以导出本页展示的数据,导出的 ...
(转).NET导出Excel的四种方法及评测
.NET导出Excel的四种方法及评测导出Excel是.NET的常见需求,开源社区.市场上,都提供了不少各式各样的Excel操作相关包.本文,我将使用NPOI.EPPlus.OpenXML.Aspo ...
[react] react声明组件有哪几种方法，各有什么不同？
[react] react声明组件有哪几种方法,各有什么不同? 1.无状态组件 2.有状态组件 3.高阶组件 4.容器组件 5.回调组件个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
freemarker导出Word文档并在其中插入图片
先将word转成xml格式,再用notepad将其转为ftl格式(将要填入数据的地方加个占位符,${name}) import java.io.File; import java.io.FileInp ...
web前端移动端项目测试的几种方法
web前端移动端项目测试的几种方法本人只是个做前端刚刚半年的小白技术还不熟练见识也不够广希望大家不喜勿喷如果有不对的地方欢迎大家指出我更加会努力的学习提高自己的水平! 本人只是 ...
Typora基础用法：pandoc安装，导入导出word文档,pdf文件。设置图片目录
点击观看B站视频 Typora基础用法:pandoc安装,导入导出word文档,pdf文件.设置图片目录. 一. pandoc安装首次安装完typora,是没法导入的,需要安装pandoc 选择[请 ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
matplotlib 图片复制到Word的几种方法
matplotlib 图片复制到Word的几种方法 1.savefig()方法支持存储为eps格式的矢量图:还可以保存为svg格式,再用其它工具转换为emf:如果只需要一般的清晰度,也可以在保存png ...
vue存储数据的几种方法（Vuex与本地存储）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 vue存储数据的几种方法(Vuex与本地存储) 前言一.vuex 1.创建vuex 2.存入数据 3.取出数据二.本地存储 1.存 ...

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

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

方法二(Xdoc.js)

方法三（html-docx-js）

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

最新文章

热门文章