近有一個業務是前端要上傳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代碼;

}