近有一个业务是前端要上传word格式的文稿,然后用户上传完之后,可以用浏览器直接查看该文稿,并且可以在富文本框直接引用该文稿,所以上传word文稿之后,后端保存到db的必须是html格式才行,所以涉及到word格式转html格式。
通过调查,这个word和html的处理,有两种方案,方案1是前端做这个转换。方案2是把word文档上传给后台,后台转换好之后再返回给前端。至于方案1,看到大家的反馈都说很多问题,所以就没采用前端转的方案,最终决定是后端转化为html格式并返回给前段预览,待客户预览的时候,确认格式没问题之后,再把html保存到后台(因为word涉及到的格式太多,比如图片,visio图,表格,图片等等之类的复杂元素,转html的时候,可能会很多格式问题,所以要有个预览的过程)。
对于word中普通的文字,问题倒不大,主要是文本之外的元素的处理,比如图片,视频,表格等。针对我本次的文章,只处理了图片,处理的方式是:后台从word中找出图片(当然引入的jar包已经带了获取word中图片的功能),上传到服务器,拿到绝对路径之后,放入到html里面,这样,返回给前端的html内容,就可以直接预览了。
maven引入相关依赖包如下:
<poi-scratchpad.version>3.14</poi-scratchpad.version>
<poi-ooxml.version>3.14</poi-ooxml.version>
<xdocreport.version>1.0.6</xdocreport.version>
<poi-ooxml-schemas.version>3.14</poi-ooxml-schemas.version>
<ooxml-schemas.version>1.3</ooxml-schemas.version>
<jsoup.version>1.11.3</jsoup.version>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-scratchpad</artifactId>
<version>${poi-scratchpad.version}</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>${poi-ooxml.version}</version>
</dependency>
<dependency>
<groupId>fr.opensagres.xdocreport</groupId>
<artifactId>xdocreport</artifactId>
<version>${xdocreport.version}</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml-schemas</artifactId>
<version>${poi-ooxml-schemas.version}</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>ooxml-schemas</artifactId>
<version>${ooxml-schemas.version}</version>
</dependency>
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>${jsoup.version}</version>
</dependency>
word转html,对于word2003和word2007转换方式不一样,因为word2003和word2007的格式不一样,工具类如下:
使用方法如下:
public String uploadSourceNews(MultipartFile file) {
String fileName = file.getOriginalFilename();
String suffixName = fileName.substring(fileName.lastIndexOf("."));
if (!".doc".equals(suffixName) && !".docx".equals(suffixName)) {
throw new UploadFileFormatException();
}
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyyMM");
String dateDir = formatter.format(LocalDate.now());
String directory = imageDir + "/" + dateDir + "/";
String content = null;
try {
InputStream inputStream = file.getInputStream();
if ("doc".equals(suffixName)) {
content = wordToHtmlUtil.Word2003ToHtml(inputStream, imageBucket, directory, Constants.HTTPS_PREFIX + imageVisitHost);
} else {
content = wordToHtmlUtil.Word2007ToHtml(inputStream, imageBucket, directory, Constants.HTTPS_PREFIX + imageVisitHost);
}
} catch (Exception ex) {
logger.error("word to html exception, detail:", ex);
return null;
}
return content;
}
关于doc和docx的一些存储格式介绍:
docx 是微软开发的基于 xml 的文字处理文件。docx 文件与 doc 文件不同, 因为 docx 文件将数据存储在单独的压缩文件和文件夹中。早期版本的 microsoft office (早于 office 2007) 不支持 docx 文件, 因为 docx 是基于 xml 的, 早期版本将 doc 文件另存为单个二进制文件。
DOCX is an XML based word processing file developed by Microsoft. DOCX files are different than DOC files as DOCX files store data in separate compressed files and folders. Earlier versions of Microsoft Office (earlier than Office 2007) do not support DOCX files because DOCX is XML based where the earlier versions save DOC file as a single binary file.
可能你会问了,明明是docx结尾的文档,怎么成了xml格式了?
很简单:你随便选择一个docx文件,右键使用压缩工具打开,就能得到一个这样的目录结构:
所以你以为docx是一个完整的文档,其实它只是一个压缩文件。
参考:
https://www.cnblogs.com/ct-csu/p/8178932.html
AVA中将WORD转换为HTML导入到WANGEDITOR编辑器中(解决图片问题,样式,非常完美),wangEditor如何导入word文档,如何实现导入WORD文档到WANGEDITOR编辑器中?WANGEDITOR导入WORD文档 WANGEDITOR WORD导入插件,HTML富文本编辑器导入WORD,Web富文本编辑器导入WORD,WANGEDITOR富文本编辑器导入WORD,WANGEDITOR导入WORD,WANGEDITORWORD导入编辑,wangEditor集成word导入功能,
后端是用的JAVA,SpringBoot框架,实际上前端在集成的时候是不关心后端具体是用什么语言实现的。
它这个版本有几个wangEditor3,wangEditor4,wangEditor5,好用的是就3和4,5不支持插入HTML。但是用户用插入HTML这个功能用的比较多。
vue-cli-wangEditor3,vue3-cli-wangEditor4集成word导入功能。在VUE框架下面集成了WORD导入功能。
用户选择word文件后,自动转换成html,自动将word里面的图片上传到服务器中,自动将HTML添加到编辑器中。
主要的方案就是提供一个转换接口,转换接口使用RESTful协议,这样的话兼容性更好一点,其它的平台用起来的话更方便简单一点,而且测试起来也方便。
现有项目需要为TinyMCE增加导入word文件的功能,导入后word文件里面的图片自动上传到服务器中,返回图片和文字HTML,word里面的文本样式保留
用户一般在发新闻和发文章时用到,算是一个高频使用功能,用户体验上来讲确实是很好,和以前的发新闻或者发文章的体验比起来要方便许多,用户用的更爽。
1.下载示例
https://gitee.com/xproer/zyoffice-vue3-cli-wang-editor4
2.引入组件
3.添加按钮
4.配置转换接口
效果
开发文档:https://drive.weixin.qq.com/s?k=ACoAYgezAAwsDazDKJ
产品比较:https://drive.weixin.qq.com/s?k=ACoAYgezAAwh8oq8Zf
产品源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwjJM8412
报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwsfyDdrf
近在工作中遇到一个bug,将word转换成html,转换成功之后在浏览器中打开其中图片不显示,使用img标签,src指定图片相对地址又是能显示的,排除图片问题。
网上能搜索到的demo
打开转码之后的html代码发现,生成的是vml图片标签,这个在IE9以后就不支持了,更别说现在的主流浏览器了。
生成的html中使用的是vml标签
将这个跟大佬分析分析,各种文档一查,咔咔咔大致分析出问题所在。原来jacob使用的是word本身自带的功能,相当于把word打开另存为html,于是手动将word转为html试了一下,果然效果与代码转换一致,这时候注意到word另存为时有一个web选项,里面有个使用vml渲染图片默认是选中的,去掉这个选项,再次生成,图片正常显示。
到这里基本已经确定了问题的解决思路,另存为时不勾选这个选项,那么问题来了,怎么利用jacob操作另存为时去掉这个选项呢,想去搜搜看jacob相关的文档,结果不知道是不是因为这个很老了,网上大多数都是demo,根本没有相关的文档可看,Github上也是只言片语,根本无从查起。
jacob github 地址:https://github.com/joval/jacob
微软官网文档
官方文档连接:https://docs.microsoft.com/zh-cn/office/vba/api/word.weboptions.relyonvml
微软官网查询相关文档,发现其实是可以关闭的,于是代码变成这样
关闭relyOnVml
再次运行程序,这次转出来的html就能在浏览器打开了。
总结,在这次解决问题的过程中,学会了往更深层次去想问题,找对方向,迎难而上。
记录一下这个问题解决的经验,也希望能帮到同样遇到这个问题的人。
*请认真填写需求信息,我们会在24小时内与您取得联系。