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");
    }