Vue项目中导入excel文件读取成js数组
1. 安装组件
cnpm install xlsx --save
2. 代码
<template> <span> <input class="input-file" type="file" @change="exportData" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/> <button @click="btnClick">导入EXCEL</button> </span> </template> <script> import XLSX from 'xlsx' export default { name: 'HelloWorld', props: { type: String, default: '选择excel文件' }, methods: { btnClick () { document.querySelector('.input-file').click() }, exportData (event) { if (!event.currentTarget.files.length) { return } const that = this // 拿取文件对象 var f = event.currentTarget.files[0] // 用FileReader来读取 var reader = new FileReader() // 重写FileReader上的readAsBinaryString方法 FileReader.prototype.readAsBinaryString = function (f) { var binary = '' var wb // 读取完成的数据 var outdata // 你需要的数据 var reader = new FileReader() reader.onload = function (e) { // 读取成Uint8Array,再转换为Unicode编码(Unicode占两个字节) var bytes = new Uint8Array(reader.result) var length = bytes.byteLength for (var i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]) } // 接下来就是xlsx了,具体可看api wb = XLSX.read(binary, { type: 'binary' }) outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) // 自定义方法向父组件传递数据 console.log('outdata = ' + JSON.stringify(outdata)) that.$emit('getResult', outdata) } reader.readAsArrayBuffer(f) } reader.readAsBinaryString(f) } } } </script> <style scoped> .input-file { display: none; } </style>
读取EXCEL中的日期类型时,需要时间转换 // excel读取2018/01/01这种时间格式是会将它装换成数字类似于46254.1545151415 numb是传过来的整数数字 formatDate (numb) { const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) return time },
编程PDF电子书免费下载: http://www.shitanlife.com/code 每天学习一点点