近有一个业务是前端要上传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

、javaScript介绍

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

(客户端语言)

JavaScript特点

向HTML页面中添加交互行为

脚本语言，语法和Java类似

解释性语言，边解释边执行

JavaScript组成：ECMAScript 、DOM、BOM

基本结构：

<script type="text/javascript">

<!—

JavaScript 语句;

—>

</script >

示例：

……

<title>初学JavaScript</title>

</head>

<body>

<script type="text/javascript">

document.write("初学JavaScript");

document.write("<h1>Hello，JavaScript</h1>");

</script>

</body>

</html>

注：<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

执行原理：

外部JS文件：

<script src="export.js" type="text/javascript"></script>

直接在HTML标签中使用：

<input name="btn" type="button" value="弹出消息框"

onclick="javascript：alert('欢迎你');"/>

二、基本常见语法：

1、核心语法：同时声明和赋值变量

var catName="皮皮";

2、数据类型：

undefined:var width;

变量width没有初始值，将被赋予值undefined;

null:表示一个空值，与undefined值相等；

number：var iNum=23; //整数

var iNum=23.0; //浮点数

boolean:true 和false;

string:一组被引号（单引号或双引号）括起来的文本

var string1="This is a string";

3、typeof运算符：

typeof检测变量的返回值

typeof运算符返回值如下函数

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和nul

4、String对象：

5、数组：

数组的常用属性和方法

类别 名称 描述

属性 length 设置或返回数组中元素的数目

方法 join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

sort() 对数组排序

push() 向数组末尾添加一个或更多 元素，并返回新的长度

6、逻辑控制语句：

if(条件)

{

//JavaScript代码;

}