整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
说起富文本编辑器，我们大都遇到过，甚至使用过，这种所见即所得的书写方式，以及它灵活的排版，让我们的创作更加流畅和美观。其实你可以把它理解成是把word等软件的功能转成在浏览器里面使用，这样就能通过其他的一些手段进行管理，并融入到相应系统中。但是由于实现方式和语言等的不同，存在着一些出入。
比如我现在正在使用的，也就是此刻我写这篇文章的工具，就是一个富文本编辑器。其实富文本编辑器有很多种，它们的功能类似、产出目的类似、使用方式也类似，只不过在丰富程度上稍有差别，今天的CKEditor5就是其中的一款。
示意图
可以看到，还是很好看的，美而不失实用。它的功能特别多，只不过有一些功能是要收费的，也就是说它只开源了一部分，或者说对于一些更高级的吊吊的功能你需要少买一点零食或者玩具。不过这些基础功能已经足够用了，它的可插拔式插件集成功能非常强大。
示意图
就像上面所示，你可以随意的添加或删除一个扩展功能，下面有非常多的待继承插件供你选择。
示意图
但是像上面这种的，带有premium的插件，那你就需要支付一定的费用才可以使用啦。
细心的你相信一眼就看出来了，这就是我们今天要讲的内容：从word中导入。
这是一个高级功能，虽然不是很常用，但是有一些特殊的场景或者需求，我们可能希望从编辑好的word中，通过导入的方式来让用户在网页中继续编辑它，并尽可能的保留内容和格式。
一个是自己资金不是很充裕，再一个是想自己去动手做做，因此就决定独立实现这样一个功能。自己做的，当然可以随便免费用。
在开始之前，我们先看下做这个功能在完成之后需要满足的效果，虽然这个功能官网是收费的，但是为了给大家演示，官网也提供了示例，我们先看下官网的成品：
效果图
我们先根据提示，在官网示例上面下载了它提供的一个word，然后用CKEditor5的导入word功能，把这个word导入到编辑器中，解析完成之后就看到了效果，它的还原度很高了，官网应该是特意制作的示例word文件，里边包含了段落、列表、图片、表格等等多个技术点。这些都是我们接下来要实现的内容，官网这复杂程度，钱花的挺值。
为了能让大家有一个对比，这里我把原版word也展示出来给你们看一下：
效果图
可以对比着感受下，不过还是有一些地方不太一样的，比如我对这个原文档做一点点更改。体现就稍微有一点略微的不同，但是这个不是毛病，只是看着有点别扭，我给两张图，先来原word的图，这是我改过的列表：
示意图
再来一张官网导入之后渲染的效果图：
示意图
主要有：1.列表距左边的距离。2.列表项之间多出空白。3.不能显示中文序号。
我们要想实现这样一个插件，首先想到有没有现成的word转html的前端或者后端插件，因为富文本编辑器是可以设置内容的，并且这个内容实质就是html代码，然后再在这个基础上进行集成开发。
因为我有自己的node后端，所以如果用后端做的话就找了一些关于node的word转html插件，一共找到了docx2html、mammoth、word2html等，但是经过测试都不太理想，于是决定放弃，换一个思路，我们可以解析word，然后根据word规范，自己生成出html。
word是流式文件，能任意编辑并且回显，那么肯定有一套约定在里边，能够保存格式并重新读取，就看它有没有开放给我们，幸好，docx这个x就是告诉我们，可以的，因为它就是xml的意思，符合xml规范。
好了，我们可以找出两个辅助插件：
第一个就是用来解压缩用的adm-zip包。
第二个就是用来解析xml文件的xml-js包。
为什么这样呢？这是因为一个docx文件，就是一个压缩包，我们把docx文件重命名为zip格式。然后就可以解压看下里面的内容：
示意图
这就是解压之后的目录，里面包含着所有的word内容，我们一会揭开它的面纱。其中一个关键目录就是word文件夹：
示意图
可以看到有很多的xml文件，它们就规定了word的回显机制和渲染逻辑。
还有一个media文件夹，我们看下它里面有什么：
示意图
可以明显的看到有两张图片，这两张图片就是我们在原word中使用的图片，它就隐藏在这里。
另外，其中document.xml文件存储了整个word的结构和内容，numbering.xml文件规定了列表如何渲染，styles.xml告诉了需要应用哪些样式。
我们就以document.xml文件做一个简单的说明，其余不做过多展开：
示意图
文件前面是对该xml的一些声明，body中包含了一个个的段落，也就是w:p。其中又包含了多个系列w:r，系列中就存储着我们的文本，比如上图红框中我圈出的部分。
而且里面还存储着段落属性w:pPr和系列属性w:rPr。我们就是通过对这些一对对的xml标签，来对word进行解析，找出它的渲染规则。
首先使用上面提到的两个包，非常简单：
const dir = join(process.cwd(), 'public/temp/word/' + fn)
const zip = new AdmZip(dir)
let contentXml = zip.readAsText('word/document.xml')
const documentData = xml2js(contentXml)
contentXml = zip.readAsText('word/numbering.xml')
const numberingData = contentXml ? xml2js(contentXml) : {
elements: ''
}
contentXml = zip.readAsText('word/_rels/document.xml.rels')
const relsData = xml2js(contentXml)
contentXml = zip.readAsText('word/styles.xml')
const styleData = xml2js(contentXml)
let ent = zip.getEntries()
let ind = fn.lastIndexOf('.')
let flag = false
for(let i = 0; i < ent.length; i++) {
let n = ent[i].entryName
if(n.substring(0, 11) === 'word/media/') {
flag = true
zip.extractEntryTo(n, join(process.cwd(), 'public/temp/word/' + fn.substring(0, ind)), false, true)
}
}
return {
documentXML: documentData?.elements[0]?.elements[0]?.elements,
numberingXML: numberingData?.elements[0]?.elements,
relsXML: relsData?.elements[0]?.elements,
styleXML: styleData?.elements[0]?.elements.slice(2),
imagePath: fn.substring(0, ind),
}简单对上面的代码做一下说明：
至此，我们看一下目前解析完成之后，形成的数据结构。
示意图
很好，现在开始集成：
import { Editor } from '/lib/ckeditor5/ckeditor'
import loadConfig from './config'
import filePlugin from './file'
import './style.scss'
loadConfig(Editor)
const container: any = ref(null)
let richEditor: any = null
onMounted(() => {
Editor.create(container.value, {
extraPlugins: [filePlugin]
}).then((editor: any) => {
richEditor = editor
}).catch((error: any) => {
console.log(error.stack)
})
})第1行，导入Editor，也就是我们一会要用的富文本编辑器，然后第9行通过create方法创建它，接收的两个参数分别表示：渲染的容器与配置的插件。
因为CKEditor5填入图片的时候，需要自己手动实现一个插件方法，因此我们要把它配置进来，因为跟咱们要讲的内容无关，就不展开了，官方文档说的很清楚了。
第5行，我在初始化编辑器之前，先去加载了一些配置，其中一个就是引入word转pdf的功能，由于CKEditor5插件扩展很容易，直接在Editor的builtinPlugins属性数据里面加上我们实现的插件就可以，所以我们直接讲插件的开发：
import { ButtonView, Plugin } from '/lib/ckeditor5/ckeditor'
import { postData } from '@/request'
import { DocumentWordProcessorReference } from '@/common/svg'
import { serverUrl } from '@/company'
import { ElMessage } from 'element-plus'
import { arrayToMapByKey } from '@/utils'
let numberingList: any = null
let relsList: any = null
let styleList: any = null
let imageUrl: any = null
let docInfo: any = {
author: {},
currentAuthor: '',
currentIndex: -1
}
const colorList = ['#d13438', '#0078d4', '#5c2e91', 'chocolate', 'aquamarine', 'lawngreen', 'hotpink', 'darkblue', 'darkslateblue', 'blueviolet', 'firebrick', 'coral', 'darkcyan', 'indigo', 'greenyellow', 'deeppink', 'indianred', 'blue', 'darkgray', 'darkmagenta', 'darkgreen', 'chartreuse', 'darksalmon', 'dimgray', 'crimson', 'darkolivegreen', 'gold', 'aqua', 'lightcoral', 'goldenrod', 'burlywood', 'green', 'darkkhaki', 'forestgreen', 'fushcia', 'darkorchid', 'deepskyblue', 'darkgoldenrod', 'cyan', 'cornflowerblue', 'brown', 'cadetblue', 'darkviolet', 'dodgerblue', 'darkred', 'gray', 'khaki', 'bisque', 'darkorange', 'darkslategray', 'lightblue', 'darkturquoise', 'darkseagreen']
let BlockType = ''引入一些必要的组件和方法等，然后定义我们的插件，一定要继承ckeditor5的Plugin：
export default class importFromWord extends Plugin {
}然后首先在里面实现它的init方法，做一些初始化操作：
init() {
const editor = this.editor
editor.ui.componentFactory.add('importFromWord', () => {
const button = new ButtonView()
button.set({
label: '从word导入',
icon: DocumentWordProcessorReference,
tooltip: true
})
button.on('execute', () => {
this.input.click()
})
return button
})
}this.editor就是我们之前使用create创建好的编辑器，通过editor.ui.componentFactory.add给工具栏添加一个按钮，也就是我们要点击导入word的按钮。
示意图
这里面用到了ckeditor5的ButtonView按钮组件生成器，设置它的名称和图标，然后添加一个暴露出来的事件，当点击按钮的时候，触发选择文件弹窗，这个input是我自己写的一个文件上传输入框。
接下来，我们去构造函数中做一些事情，当实例化这个组件的时候，初始化好我们需要的东西：
constructor(editor: any) {
super(editor)
this.editor = editor
this.input = document.createElement('input')
this.input.type = 'file'
this.input.style.opacity = 0
this.input.style.display = 'none'
this.input.addEventListener('change', (e: any) => {
const formData: any = new FormData()
formData.append("upload", this.input.files[0])
formData.Headers = {'Content-Type':'multipart/form-data'}
let ms = ElMessage({
message: "正在解析...",
type: "info",
})
postData({
service: "lc",
url: `file/word`,
data: formData,
}).then(res => {
ms.close()
if (res.data) {
ElMessage({
message: "上传文件成功",
type: "success",
})
const { documentXML, numberingXML, relsXML, styleXML, imagePath } = res.data
numberingList = numberingXML
relsList = relsXML
styleList = styleXML
imageUrl = imagePath
markList(documentXML)
const html = listToHTML(documentXML)
const ckC = this.editor.ui.view?.editable?.element
const ckP = this.editor.ui.view?.stickyPanel?.element
if(ckC) {
let rt = ckC.parentNode.parentNode.parentNode
rt.style.setProperty('--content-top', docInfo.paddingTop + 'px')
rt.style.setProperty('--content-right', docInfo.paddingRight + 'px')
rt.style.setProperty('--content-bottom', docInfo.paddingBottom + 'px')
rt.style.setProperty('--content-left', docInfo.paddingLeft + 'px')
rt.style.setProperty('--content-width', docInfo.pageWidth - docInfo.paddingLeft - docInfo.paddingRight + 'px')
}
if(ckP) {
let rt = ckP.parentNode.parentNode.parentNode
rt.style.setProperty('--sticky-width', docInfo.pageWidth + 'px')
}
const div = document.createElement('div')
div.style.display = 'none'
div.innerHTML = html
splitList(div.firstElementChild)
insertDivToList(div)
document.body.appendChild(div)
document.body.removeChild(div)
this.editor.setData(div.innerHTML)
} else {
ElMessage({
message: "上传文件失败",
type: "error",
})
}
})
})
}在这里我们主要做了几件事：
首先第4行到第7行定义了一个文件选择器。
然后给这个输入框添加了一个事件。
第9行到第20行我们读取到选择的文件并上传到服务器进行解析。
对返回回来的文档数据，我们首先做一个标记，以方便我们接下来的操作：
function markList(list: any) {
let cache: any = []
list.forEach((item: any, index: number) => {
let isList = false
if(item.name === 'w:p') {
let pPr = findByName(item.elements, 'w:pPr')
if(pPr) {
let numPr = findByName(pPr.elements, 'w:numPr')
if(numPr) {
isList = true
let ilvl = numPr.elements[0].attributes['w:val']
let numId = numPr.elements[1].attributes['w:val']
let c = cache.at(-1)
numPr.level = ilvl
if(c) {
if(c.ilvl === ilvl && c.numId === numId) {
cache.pop()
}else if(c.ilvl === ilvl && c.numId !== numId) {
numPr.start = true
c.numPr.end = true
cache.pop()
}else if(c.ilvl < ilvl && c.numId === numId) {
numPr.start = true
cache.pop()
}else if(c.ilvl > ilvl && c.numId === numId) {
c.numPr.end = true
cache.pop()
}else if(c.numId !== numId) {
while(c.ilvl >= ilvl) {
c.numPr.end = true
c = cache.pop()
if(!c) {
break
}
}
}
}else {
numPr.start = true
}
cache.push({
ilvl,
numId,
index,
numPr
})
}
}
}
})
cache.forEach((c: any) => {
c.numPr.end = true
})
}主要就是对列表进行标记，因为它要做一些特殊化的处理。
拿到数据之后，我们的核心逻辑都在第33行，实现listToHtml进行处理：
function listToHTML(list: any) {
let html = ''
list.forEach((item: any, index: number) => {
let info = getContainer(item)
html += info
})
return html
}遍历每一项，然后把它们生成的html拼接起来：
function getContainer(item: any) {
let html = ''
if(item.name === 'w:p') {
let n = findByName(item.elements, 'w:pPr')
let el: any = null
let pEl: any = null
let attr: any = {}
let style = null
if(n) {
let ps = findByName(n.elements, 'w:pStyle')
if(ps) {
let styleId = getAttributeVal(ps)
let sy = styleList.find((item: any) => {
return item.attributes['w:styleId'] === styleId
})
let ppr = findByName(sy.elements, 'w:pPr')
let rpr = findByName(sy.elements, 'w:rPr')
if(ppr) {
ppr.elements.forEach((p: any) => {
if(!findByName(n.elements, p.name)) {
n.elements.push(p)
}
})
}
if(rpr) {
let rs = findsByName(item.elements, 'w:r')
rs.forEach((r: any) => {
let rr = findByName(r.elements, 'w:rPr')
rpr.elements.forEach((p: any) => {
if(!findByName(rr.elements, p.name)) {
rr.elements.push(p)
}
})
})
}
}
let info = getPAttribute(n.elements)
attr = info.attr
style = info.style
if(attr.list) {
let s1: any = {}
let s2: any = {}
for(let t in info.style) {
if(t === 'list-style-type') {
s1[t] = info.style[t]
}else{
s2[t] = info.style[t]
}
}
for(let t in info.liStyle) {
s1[t] = info.liStyle[t]
}
if(attr.order) {
if(attr.start) {
if(attr.level !== '0') {
html += '<li style="list-style-type:none;">'
}
html += '<ol'
html += addStyle(s1)
html += '<li>'
html += '<p'
html += addStyle(s2)
}else {
html += '<li>'
html += '<p'
html += addStyle(s2)
}
}else{
if(attr.start) {
if(attr.level !== '0') {
html += '<li style="list-style-type:none;">'
}
html += '<ul'
html += addStyle(s1)
html += '<li>'
html += '<p'
html += addStyle(s2)
}else {
html += '<li>'
html += '<p'
html += addStyle(s2)
}
}
}else{
html += '<p'
html += addStyle(info.style)
}
}else{
el = document.createElement('p')
}
item.elements.forEach((r: any) => {
if(r.name === 'w:ins') {
setAuthor(r.attributes['w:author'])
r.elements.forEach((ins: any) => {
html += dealWr(ins, 'ins')
})
}else if(r.name === 'w:hyperlink') {
r.elements.forEach((hyp: any) => {
html += dealWr(hyp)
})
}else if(r.name === 'w:r') {
html += dealWr(r)
}else if(r.name === 'w:commentRangeStart') {
BlockType = 'comment'
}else if(r.name === 'w:commentRangeEnd') {
BlockType = ''
}else if(r.name === 'w:del') {
setAuthor(r.attributes['w:author'])
r.elements.forEach((hyp: any) => {
html += dealWr(hyp, 'del')
})
}
})
if(attr.list) {
if(attr.order) {
if(attr.end) {
html += '</p></li></ol>'
if(attr.level !== '0') {
html += '</li>'
}
}else {
html += '</p></li>'
}
}else{
if(attr.end) {
html += '</p></li></ul>'
if(attr.level !== '0') {
html += '</li>'
}
}else {
html += '</p></li>'
}
}
}else {
html += '</p>'
}
}else if(item.name === 'w:tbl') {
let n = findByName(item.elements, 'w:tblPr')
if(n) {
let info = getTableAttribute(n.elements)
html += '<figure class="table"'
html += addStyle(info.figureStyle)
html += '<table'
html += addStyle(info.tableStyle)
html += '<tbody>'
}
item.elements.forEach((r: any) => {
if(r.name === 'w:tr') {
html += dealWtr(r)
}
})
html += '</tbody></table></figure>'
}else if(item.name === 'w:sectPr') {
let ps = findByName(item.elements, 'w:pgSz')
let pm = findByName(item.elements, 'w:pgMar')
if(ps) {
docInfo.pageWidth = Math.ceil(ps.attributes['w:w'] / 20 * 96 / 72) + 1
}
if(pm) {
docInfo.paddingTop = pm.attributes['w:top'] / 1440 * 96
docInfo.paddingRight = pm.attributes['w:right'] / 1440 * 96
docInfo.paddingBottom = pm.attributes['w:bottom'] / 1440 * 96
docInfo.paddingLeft = pm.attributes['w:left'] / 1440 * 96
}
}
return html
}做了一些逻辑判断，和不同标签的特殊处理。
在刚才input事件中的第34行到47行，主要是做一些编辑器大小等外观设置，因为要配置成word中的宽度与边距。
还需要考虑到，列表可能不是连续的，中间可能被一些段落所隔开，因此到这里还需要对生成的html中的列表进行分割，并修复索引问题：
function splitList(el: any) {
while(el) {
if(el.tagName === 'OL' || el.tagName === 'UL') {
let a = el.querySelectorAll('ol > p, ul > p')
let path: any = []
a.forEach((item: any) => {
let p: any = []
while(item) {
p.push(item)
item = item.parentNode
if(item === el) {
break
}
}
path.push(p.reverse())
})
let cur = el
let t: number = 0
path.forEach((p: any) => {
let list = cur.cloneNode(false)
let list2 = list
cur.parentNode.insertBefore(list, cur)
p.forEach((l: any, ind: number) => {
let chi = cur.children
let t = 0
for(let i = 0; i < chi.length; i++) {
if(chi[i] !== l) {
list.append(chi[i])
t++
i--
}else{
if(cur.tagName === 'OL') {
let s = cur.getAttribute('start')
cur.setAttribute('start', s ? (+s + t) : (t + 1))
}
if(ind === p.length - 1) {
let par = chi[i].parentNode
el.parentNode.insertBefore(chi[i], el)
if(par.children.length === 0) {
par.remove()
}
cur = el
}else{
cur.setAttribute('start', cur.getAttribute('start') - 1)
let cl = chi[i].cloneNode(false)
list.append(cl)
list = cl
cur = chi[i]
}
break
}
}
})
})
}
el = el.nextElementSibling
}
}并且由于CKEditor5会对相邻的列表进行合并等处理，这不是我们想要的，可以在它们中间插入一些div：
function insertDivToList(div: any) {
let f = div.firstElementChild
let k = f.nextElementSibling
while(k) {
if(f.tagName === 'UL' && k.tagName === 'UL') {
let d = document.createElement('div')
f = k
div.insertBefore(d, f)
k = f.nextElementSibling
}else if(f.tagName === 'OL' && k.tagName === 'OL') {
let d = document.createElement('p')
d.setAttribute('list-separator', "true")
f = k
div.insertBefore(d, f)
k = f.nextElementSibling
}else {
f = k
k = f.nextElementSibling
}
}
}最后我们用this.editor.setData方法，将刚才生成的html设置到编辑器中去。
到此我们基本就已经把需要的功能实现了。
该来看一下我们所做的工作成果了，首先同样导入CKEditor5官网中的文档：
效果图
可以看到，内容与格式等，基本跟原word一样，与CKEditor5官网的示例也相同。然后我们再用另一个刚才修改过的文件测试一下：
效果图
这个是用咱们刚才开发的插件导入的word的效果图，几乎与原word一模一样，也没有了CKEditor官网中的那几个小问题。
至此，我们针对CKEditor5导入word的功能已经开发完毕，同时我又找了各种类型的word测试，均未发现问题，还原度都非常高。
感谢docx的规范，使得我们自己解析word成为可能，虽然不可能100%还原word的格式，但是能够将它导入到我们的富文本编辑器中，以进行二次创作，这对我们来说是非常方便的。
本次word转html，并导入富文本编辑器的开发过程，希望能给大家带来启发。
每一次创作都是快乐的，每一次分享也都是有益的，希望能够帮助到你！
谢谢
近有一个业务是前端要上传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
啥要做这个软件
软件获取方式：私信“word”即可获取
*请认真填写需求信息，我们会在24小时内与您取得联系。
