JSON与excel之间的相互转化(Vue)

Posted 2022-01-04 前端白雪

JSON与excel之间的相互转化(Vue) 

 

这几天项目中有个需求，是对数据进行批量操作

上传时候需要把excel转为json发给后端，而在导出时需要将json转为excel文件

我是借用了xlsx这个库来完成的，在此记录一下

先npm i xlsx安装相关依赖

设置一个input用于

 <input type="file"
           name="fileUploader"
           id="fileUploader"
           accept=".xls,.xlsx"
        @change="_toJSON"/>

引入对应的框架

import xlsx from \'xlsx\'

excel转json

_toJson()
    let file = e.target.files[0]
      let reader = new FileReader()
      reader.onload = (event) => 
        console.log(event);
        let data = event.target.result;
        const workbook = XLSX.read(data, 
          type: \'binary\'
        );
        let resultArray = []
        workbook.SheetNames.forEach(function (sheetName) 
          console.log(\'workbook.Sheets[sheetName]\', workbook.Sheets[sheetName]);
          const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName],  header: 1 );
          console.log(\'data\', data);
          let mainData = data.slice(1)
          if (mainData.length > 0) 
            for (let row = 0; row < mainData.length; row++) 
              let rowData = 
              for (let col = 0; col < data[0].length; col++) 
                rowData[data[0][col]] = mainData[row][col] || \'\'
              
              resultArray.push(rowData)
            
           else 
            alert(\'至少需要一行有效数据\')
          
        )
        console.log(\'resultArray\', resultArray);

      
      reader.readAsBinaryString(file);

json转excel

_toExcel () 
      let data = [ "业务政策": 1, "产品名称": 2, "证件号码": 5 ,  "产品名称": 2 ]
      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "People");
      XLSX.writeFile(wb, "sheetjs.xlsx");