纯js解析docx文件探索

大笨钟的W

纯前端解析.docx文件

前段时间做过一个纯前端解析.docx文件的需求,只需要解析文件的内容展示在页面上即可,需求听上去还挺简单的,然而我还是踩了到了巨坑。

前端解析工具

  • mammath

从各个网站上搜到了不少的解析方法,这里我发现了mammoth,这个插件功能还是很强大的,结合H5和mammoth,很快我就写下了一个解析docx文件的方法:

function parseStandFile(file){
          var reader = new FileReader();
          reader.onloadend = function(event) {
            var arrayBuffer = reader.result;
      
            mammoth.extractRawText({arrayBuffer: arrayBuffer}).then(function (resultObject) {
              $result.innerHTML = resultObject.value
              console.log(resultObject.value)
            })
          };
          reader.readAsArrayBuffer(file);
      }

ps: $result:文档文本显示的dom节点

到这一步,还是很顺利的,自己创建一个docx文件,上传展示都很顺利,然而,当我拿来客户的文件,上手操作的时候,发现解析出来竟让是一片空白(unbelievable)!!!
于是我又企图从茫茫互联网中获取答案,然而一无所获sad。但是在查找的过程中发现docx文件压缩之后能看到文件的构成,于是我压缩了目标文件,发现文件目录如下:

image.png

当我打开docProps/app.xml:

image.png

发现客户文件里的压缩文件跟我的似乎不太一样,可能是客户用的word版本跟我的不太一样之类的原因吧,然而需求还是要实现的,这时我发现压缩文件夹下面的word/document.xml里存放的就是docx文件的内容,所以我的思路是先解压docx文件这个小妖精,然后找包含内容的文件,最后进行xml文件的匹配解析

  • JSZip

很容易在网上就能找到js解压缩的工具,对比了几个之后,我决定使用JSZip,使用方式也很简单,官网打开一目了然。于是我很快就写好了又一个解析方法:

JSZip.loadAsync($file.files[0])    //获取文件                         
        .then(function(zip) {
          let standalone
          zip.forEach(function (relativePath, zipEntry){
              parsePOIFile($file.files[0])   //解析文件内容,考虑兼容问题,单独写一个方法
          })
function parsePOIFile(file){
        JSZip.loadAsync(file)                              
        .then(function(zip) {
          var str = ''
          zip.forEach(function (relativePath, zipEntry) { 
              if(zipEntry.name==='word/document.xml'){ //目标文件document
                   zip.file(relativePath).async("string").then(function (data) {
                  data.match(/<w:t>[\s\S]*?<\/w:t>/ig).forEach((item)=>{
                      str += item.slice(5,-6)
                    });
                    //以上match方式参考某网友,不记得是哪个blog了
                    $result.innerHTML = str
                });
              }
            });
        }, function (e) {
            $result.append($("<div>", {
                "class" : "alert alert-danger",
                text : "Error reading " + file.name + ": " + e.message
            }));
        });
      }

至此,客户文件就成功解析了。
然而,我发现,用我自己的office创建的文件,就不能解析了(土拨鼠的咆哮),毕竟两个文件内容不一样,于是我决定也兼容一下我的版本(强迫症使我劳累)
在代码zip.file(relativePath).async("string").then(function (data)中,我打印出来data寻找他们的区别,发现两种文件的docProps/core.xml内容,有这个明显的区别:

image.png

我决定获取该节点的standarlone属性,先获取到core.xml,然后执行不同的解析方法:

if(zipEntry.name==='docProps/core.xml'){
zip.file(relativePath).async("string").then(function (data) {
   let parser=new DOMParser();
   xmlDoc=parser.parseFromString(data,"text/xml");
   standalone = xmlDoc.getElementsByTagName("cp:coreProperties")[0].getAttribute("xmlns:dcmitype")
        if(standalone){
          parseStandFile(file)   //解析标准文件
        } else {
          parsePOIFile(file)
        }
      })
    }

终于,两个文件都能成功解析了,心里非常有成就感,感悟就是:要从事物的本质思考问题(扶眼镜.jpg)

阅读 3k
21 声望
1 粉丝
0 条评论
你知道吗?

21 声望
1 粉丝
宣传栏