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