xmind -zend文件解析

讀取文件

  • 使用vue文件上傳
  • FileReader 讀取文件

FileReader 實現

 var inputObj=document.createElement('input')
      inputObj.setAttribute("accept",".xmind");
      inputObj.setAttribute('type','file');
      inputObj.setAttribute("style",'visibility:hidden');
      inputObj.setAttribute("value",'savefilename');
      inputObj.setAttribute('id','file');
      inputObj.setAttribute('name','file');
      document.body.appendChild(inputObj);
      inputObj.value;
      inputObj.click();
      inputObj.addEventListener('change', function () {
        if (!inputObj.value){
          return;
        }
        var file = inputObj.files[0]
        var reader = new FileReader();
        reader.onload = function(e){
          var data = e.target.result;
          const zip = new JSZip(data)
          // 區分xmind8與xmindzend
          console.log(zip.files.hasOwnProperty("manifest.json"));
          for (let filename in zip.files){
            if (filename  === "content.json") {
              let tmpArr = JSON.parse(zip.file(filename).asText());
              // 讀取的文本包含多個畫布tmpArr
              // 將每個畫布解析爲一個腦圖文件
              // tmpArr.forEach((file,index)=>{
              //   console.log(file);
              // })
            }
          }
        }
        reader.readAsArrayBuffer(file)
      })

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章