vue2文件导入

最新推荐文章于 2024-02-01 22:18:36 发布

m0_67805754

最新推荐文章于 2024-02-01 22:18:36 发布

阅读量273

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_67805754/article/details/130301357

版权

<template>

<div>

<el-button type="primary" @click="handelClick" v-show="btnShow">导入</el-button>

<input type="file" ref="fileInput" @change="handleFileUpload" v-show="!btnShow">

</div>

</template>

<script>

import * as XLSX from 'xlsx'

export default{

data () {

return {

btnShow:true

}

},

created () {

},

computed:{

},

methods:{

handelClick(){

this.$refs.fileInput.click()

},

handleFileUpload(event) {

const file = event.target.files[0];

const reader = new FileReader();

file&&reader.readAsBinaryString(file);

reader.onload = () => {

const workbook = XLSX.read(reader.result, { type: 'binary' });

const sheetName = workbook.SheetNames[0];

const sheet = workbook.Sheets[sheetName];

const data = XLSX.utils.sheet_to_json(sheet, { header: 1 });

console.log(data);

};

},

},

}

</script>

<style lang='less' scoped>

</style>