> 文章列表 > vue2文件导入

vue2文件导入

vue2文件导入

<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>