Vue+Element前端导入导出Excel

最新推荐文章于 2025-04-29 15:24:22 发布

原创

最新推荐文章于 2025-04-29 15:24:22 发布 · 7.2k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #element-ui #javascript

1 前言

1.1 业务场景

由前台导入Excel表格，获取批量数据。

根据一个数组导出Excel表格。

2 实现原理

2.1 引入工具库

file-saver、xlsx、script-loader

npm install -S file-saver xlsx

npm install -D script-loader

2.2 导入Excel

2.2.1 Element 上传控件

<el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :file-list="fileListUpload"
    :limit="limitUpload"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :auto-upload="false">
    <el-button size="small" type="primary">点击上传</el-button>
    <div sl