在vue中上传excel以及下载excel模板

最新推荐文章于 2025-07-09 14:58:43 发布

原创

最新推荐文章于 2025-07-09 14:58:43 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#excel #vue

项目需求

页面中可通过“添加功能”一个个的添加每个系统相应角色的负责人，但有时候有的需要批量添加，同时又需要提供模板供用户填写
在这里插入图片描述

操作步骤

找到合适的excel相关的插件

我这里最后使用的xlsx插件，详细信息见[link]https://www.npmjs.com/package/xlsx
这位大大的分享也是我在做的时候对我理解这个插件帮助比较大的[link]https://www.jianshu.com/p/31534691ed53

安装插件

$ npm install xlsx

在要使用的文件里引入插件

import XLSX from ‘xlsx’

在文件中使用

<template>
    <span class="excel-upload">
        <!-- 为了覆盖批量导入input type="file"的样式所写的 -->
        <span class="choose-file">
            <input type="file" @change="readExcel($event)">
            <el-button class="over-button" type="success" icon="el-icon-plus" size="small" plain>批量导入</el-button>
        </span>

        <!--