<div class="home">
<el-button type="success" @click="exportExcel">导出</el-button>
<hr />
<el-upload class="upload-demo" accept=".xlsx,.csv,.xls" action="" :show-file-list="true" :on-change="importExcel">
<el-button size="small" type="primary">导入</el-button>
</el-upload>
<hr />
<el-table :data="tableData" style="width: 100%" class="table">
<el-table-column prop="id" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
name: 'HomeView',
components: {
},
data() {
return {
tableData: []
}
},
methods: {
//导入表格
// importExcel(file) {
// let that = this
// let { raw } = file
// let render = new FileReader()
// render.readAsArrayBuffer(raw)
// render.onload = function () {
// const buffer = render.result
// const bytes = new Uint8Array(buffer)
// const length = bytes.byteLength
// let binary = ''
// for (let i = 0; i < length; i++) {
// binary += String.fromCharCode(bytes[i])
// }
// const bg = XLSX.read(binary, { type: 'binary' })
// const outData = XLSX.utils.sheet_to_json(bg.Sheets[bg.SheetNames[0]])
// console.log(outData, '数据')
// let outarr = [...outData]
// let arr = []
// outarr.map(v => {
// let obj = {}
// obj.id = v.序号
// obj.name = v.姓名
// obj.age = v.年龄
// obj.address = v.地址
// arr.push(obj)
// })
// that.tableData = arr
// }
// },
importExcel(file) {
let that = this
let { raw } = file
let render = new FileReader()
render.readAsArrayBuffer(raw)
render.onload = function () {
const buffer = render.result
const bytes = new Uint8Array(buffer)
const length = bytes.byteLength
let binary = ''
//每次处理的行数是多少
const chunkSize = 50
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
const bg = XLSX.read(binary, { type: 'binary' })
const outData = XLSX.utils.sheet_to_json(bg.Sheets[bg.SheetNames[0]])
//创建空数组 用来存储数据
let arr = []
//定义一个初始的下标0
let rowIndex = 0
//处理数据的函数
function processChunk() {
//确定结束的索引
const endRow = Math.min(rowIndex + chunkSize, outData.length)
//从数组里提取数据
const chunkData = outData.slice(rowIndex, endRow)
//遍历每一行数据
chunkData.map(v => {
let obj = {}
obj.id = v.序号
obj.name = v.姓名
obj.age = v.年龄
obj.address = v.地址
arr.push(obj)
})
//更新索引
rowIndex += chunkSize
if( rowIndex < outData.length ){
setTimeout(processChunk,0)
console.log('处理数据')
}else{
that.tableData = arr
}
}
processChunk()
}
},
//导出
exportExcel() {
//获取表格的DOM元素
let table = document.querySelector('.table')
//定义导出的参数,raw:true表示保留原始数据的格式
let xlsxParam = { raw: true }
//把表格中的数据导出到excel文件
const tab = XLSX.utils.table_to_book(table, xlsxParam)
console.log(tab, '???')
//把数据转为二进制字符串
let tabout = XLSX.write(tab, {
bookSST: true,
bookType: 'xlsx',
type: 'array'
})
// console.log( tabout,'转后的数据' )
try {
//使用filesaver把导出的数据保存成文件
FileSaver.saveAs(
//创建Blob对象，并保存为文件
new Blob([tabout], { type: 'application/octet-stream;chartset=UTF-8' }),
//指定文件名称
Math.random() + '.xlsx'
)
} catch (e) {
console.log('导出失败', e)
}
return tabout
}
}
}
</script>
