纯js分析docx文件探索

纯前端分析.docx文件前段时间做了一个纯前端分析.docx文件的需求，只需要解析文件内容显示在页面上，需求听起来很简单，但是我还是踩了个大坑。前端解析工具mammath从各个网站找了很多解析方法。我在这里找到了猛犸象。这个插件还是很强大的。结合H5和mammoth，我很快写下了一个解析do??cx文件的方法：functionparseStandFile(file){varreader=newFileReader();reader.onloadend=function(event){vararrayBuffer=reader.result;mammoth.extractRawText({arrayBuffer:arrayBuffer}).then(function(resultObject){$result.innerHTML=resultObject.valueconsole.log(resultObject.value)})};reader.readAsArrayBuffer（文件）；}ps:$result:document文本中显示的dom节点此时还是很流畅的，自己创建一个docx文件，上传显示很顺利，但是，当我拿着客户端的文件开始操作的时候，发现解析竟然是一片空白（难以置信）！！！于是我试图从浩瀚的网络中寻找答案，却没有什么可悲的。但是在查找的过程中，发现docx文件被压缩后，可以看到文件的组成，于是对目标文件进行压缩，发现文件目录如下：当我打开docProps/app.xml:我发现client文件里面的压缩文件和我的不一样，可能客户用的word版本和我的不一样，但是需求还是要实现的。这时候发现压缩文件夹下的word/document.xml就是docx文件。内容，所以我的思路是先解压小妖精docx文件，然后找到包含内容的文件，最后对xml文件进行匹配分析。JSZip是网上很容易找到的js解压工具。比较了几家之后，我决定使用JSZip，而且使用方法也很简单。打开官网一目了然。所以我很快又写了一个解析方法：JSZip.loadAsync($file.files[0])//Getthefile.then(function(zip){letstandalonezip.forEach(function(relativePath,zipEntry){parsePOIFile($file.files[0])//解析文件内容，考虑兼容性问题，单独写一个方法})functionparsePOIFile(file){JSZip.loadAsync(file).then(function(zip){varstr=''zip.forEach(function(relativePath,zipEntry){if(zipEntry.name==='word/document.xml'){//目标文件文档zip.file(relativePath).async("string").then(function(data){data.match(/[\s\S]*?<\/w:t>/ig).forEach((item)=>{str+=item.slice(5,-6)});//上面的匹配方法引用了一个网友，但我不记得是哪个博客了$result.innerHTML=str});}});},function(e){$result.append($("