js导入Excel使用xlsx处理生成table和图表数据
首先需要一个 file
类型的 input
用来导入Excel数据
<input type="file" id="excel-file">
下面就是当选中Excel文档后,对Excel的数据进行处理,这里用到的库为 xlsx ,因为这里是单纯的展示这个库对于Excel数据读取的作用,所以没有使用 package
包的形式进行安装,如果你是在框架中使用,可以安装这个库
npm i xlsx
这里使用的是 cdn加载
的方式
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.core.min.js"></script>
<script>
// Excel文件名称
let chartTitle = ''
const inputEle = document.querySelector('#excel-file')
inputEle.addEventListener('change', inputChangeHandle)
function inputChangeHandle(e) {
let pathArr = this.value.split('\\') // this.value -> 'C:\\fakepath\\考勤详情.xlsx'
chartTitle = pathArr[pathArr.length - 1] // 考勤详情.xlsx
let titleArr = chartTitle.split('.') // ['考勤详情', 'xlsx']
chartTitle = titleArr[0] // 考勤详情
let fileReader = new FileReader()
fileReader.onload = function(ev) {
let workbook = XLSX.read(ev.target.result, {
type: 'binary'
})
// sheetName就是这张sheet的名称(是sheet的名称不是Excel文件的名称),在workbook中它是key
for(let sheetName in workbook.Sheets) {
let persons = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName])
console.log(persons)
// ... 对persons数据进行其他应用
}
}
fileReader.readAsBinaryString(e.target.files[0])
}
</script>
其中
let workbook = XLSX.read(ev.target.result, {
type: 'binary'
})
console.log(workbook)
// sheetName就是这张sheet的名称,在workbook中它是key
for(let sheetName in workbook.Sheets) {
let persons = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName])
console.log(persons)
}
到此为止就可以针对已有的数据进行数据整合,去解构组合成想要的数据格式