vue 利用 js-xslx插件实现前端解析 excel 表格获取数据

最新推荐文章于 2023-09-23 16:38:19 发布

原创

最新推荐文章于 2023-09-23 16:38:19 发布 · 890 阅读

标签

#vue #excel

收录于

本文介绍如何在Vue项目中利用js-xlsx库解析Excel文件，获取表格数据。通过实例展示详细步骤，包括文件读取、数据转换，帮助开发者实现前端Excel数据处理。

<template>
    <div>
        <p  class="top">支持通过excel文件批量员工信息，请按`在这里插入代码片`照模板格式编辑员工信息后上传、下载模板。</p>
        <input class="input-file" type="file" @change="exportData"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
        <el-button type="primary" @click="btnClick">导入EXCEL</el-button>
        <p v-if="isVisibleSuccess" class="import-success">导入成功</p>
        <div class="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </div>
    </div>
</template>

<script>
    import XLSX from 'xlsx'

    export default {
        name: 'importFile',
        data() {
            return {
                outdata: null,
                isVisibleSuccess: false,
                index: 1, //上传顺序
            }
        },