前端导出文件为word格式（React）

对于前端导出word文档来说，感觉技术没有那么成熟（个人感觉，参数什么的也比较少）

我这里是用了这个mhtml-to-word这个库（这个库的信息更是少的可怜感觉，但还比较好用）

1.首先安装mhtml-to-word这个库

yarn add mhtml-to-word

2.引入

import { exportWord } from 'mhtml-to-word'

3.然后调用这个函数

exportWord的参数有mhtml, style, filename, data, selector，

mhtml：html里的body中的内容

style：是导出为word时设定word页面中的样式（下面附图）

filename：导出的文件名

data ：这个好像是类似模板的一个参数（具体我不太清楚怎么用，看了一下baidu-template-pro官方，应该是对应页面中替代的数据，需要转译，看起来比较复杂，详情参考：https://github.com/BetterZxx/baidu-template-pro）

selector：选择器（选择你要导出为word的id参数，例如盒子id=“mhtml”，那么这个参数就是“”“#mhtml”，导出的也就是你在mhtml下写的东西）

style参数格式如图：

注：有些css中的样式导出为word是并不兼容，例如float，flex等是没有效果的在word里

如果想要导出word里有表格，在构建的时候要用table，th，tr，td等标签构建，导出为word的时候也会自动转换为word里的表格，就不会是一张不能编辑的图了，也可以先随便保存一个word，逆方法把格式改为html然后打开看一下源码，就会发现word里的表格是这类型标签。

小伙伴们安装这个库之后可以看看源码，源码也比较简单，主要是用baidu-template-pro和file-saveas实现的，但是它不是开源库，默认导出格式也只有doc，不能改，但是可以模仿这个库自己封装的一个函数，更改导出文件类型（我这里的需求是导出为docx）

基本上内容和mhtml-to-word库还是一致的：


import { saveAs } from "file-saver"
import baidu from "baidu-template-pro"
export const exportWord = ({ mhtml, style, filename, data, selector }) => {function getModelHtml(mhtml, style = '') {return `Content-Type: text/html; charset="utf-8"<!DOCTYPE html><html><head><style>${style}</style></head><body>${mhtml}</body></html>`}if (selector) {let nodes = window.document.querySelectorAll(selector)mhtml = nodes.length > 0 ? Array.from(nodes).reduce((a, b) => a + b.innerHTML, '') : ''}//没有baiduTemplatePro.js依赖时必须传入selectorif (!selector && typeof baidu === 'undefined') {console.error("wordExport : missing (selector) for params without depandency (baiduTemplatePro.js)");return;}if (typeof saveAs === "undefined") {console.error("wordExport : missing dependency (FileSaver.js)");return;}//没有模板引擎时，将获取节点的html字符串生成模板let html = typeof baidu !== 'undefined' ? baidu.template(getModelHtml(mhtml, style), data) : getModelHtml(mhtml)let blob = new Blob([html], { type: 'application/msword;charset=utf-8' })saveAs(blob, filename + '.docx')
}

自己封装需要安装一下file-saveas这个保存的库还有baidu-template-pro模板库就OK了

这个就是mhtml的简单使用了，具体的data参数还需要研究学习一下。

前端导出文件为word格式（React）相关推荐

Typora Mac版本安装 Pandoc 导出文件为word格式（windows可通用）
今天在和一位商务小伙伴对接的时候,需要提供一份 word 版本的初稿.对于习惯了使用支持 markdown 语法的 typora 来说,复制粘贴到 word 是不可能的. 可以通过 "导出 ...
轻松完成word格式的接口文档
今天在开发完一个项目的接口之后,公司领导过来说:"需要一份word格式的接口文档,***本门主任需要看这些文档,记得接口文档做的好看一点".然后领导拍拍我的肩膀转身就走了,身为一个 ...
前端html转word中的一种实现方案(docxtemplater)
前端html转word中的一种实现方案(docxtemplater) 前言: 此方案是根据如下多个帖子,项目实践中总结糅合而成,感谢如下 https://blog.csdn.net/qq_416153 ...
前端导出文件前端导出excel表格下载文件
导出文件的过程前端发请求, 后端处理后返回文件流, 前端通过Blob解析并下载实现过程: 前端发请求需要将响应类型更改为 arraybuffer 或 blob 不设置响应类型会导致下载的文件看起 ...
前端如何实现 Word 在线预览
前端如何实现 Word 在线预览在前端实现 Word 文件在线预览时,常用的方法包括使用第三方库.浏览器插件.后端服务器.在线文档转换平台等,具体如下: 使用第三方库常见的前端第三方库包括 Mam ...
access调整行高和列宽_《excel表格怎么调整行高和列宽》 EXCEL 表格如何导出至WORD 格式...
EXCEL 表格如何导出至WORD 格式 1.演示使用的软件为word文字处理软件,软件为office家学生版2016. 2.首先打开我档,并在上方栏找到插入菜单,单击后在工具栏中找到文本-对象. 3 ...
前端预览word文档实现
记录前端预览word文档的需求实现方案一:XDOC文档预览可以使用XDOC文档预览云服务来进行word文件的在线预览,直接去网站体验就知道怎么用了. https://view.xdocin.com ...
在疯狂的前端世界，为什么选择学习React
题图 | https://github.com/react-icons/react-icons React Native 和 Prettier的作者之一.前端大牛.Twitter大V @Vjeux(C ...
同步电机调速matlab,基于matlab的永磁同步电机调速系统的仿真word格式
基于matlab的永磁同步电机调速系统的仿真word格式摘要本文首先介绍了永磁同步电机的国内外发展状况,然后介绍了永磁同步电机的结构及原理,接着建立了永磁同步电机的数学模型,并在此基础上用MATL ...

前端导出文件为word格式（React）

前端导出文件为word格式（React）相关推荐

最新文章

热门文章