vue 中excel导入导出功能实现

最新推荐文章于 2024-08-06 16:10:14 发布

sinat_thui

最新推荐文章于 2024-08-06 16:10:14 发布

阅读量2.2k

点赞数

分类专栏：总结文章标签： js vue excel 导入导出解决重复导入

本文链接：https://blog.csdn.net/sinat_41680914/article/details/84324430

版权

本文介绍如何在Vue项目中实现Excel的导入和导出功能。首先，安装必要的依赖，然后在main.js中全局引入Blob.js和Export2Excel.js。接着，配置webpack.base.conf.js。在主要代码部分，通过监听文件输入事件实现Excel导入，使用FileReader读取文件内容，并发送axios请求处理数据。同时，提供导出Excel的功能，调用封装好的axios请求导出数据并保存为xlsx文件。为了防止重复导入，使用变量ishowFile控制文件上传元素的显示和销毁。

摘要由CSDN通过智能技术生成

1 安装依赖

 npm install -S file-saver xlsx（这里其实安装了2个依赖）

 npm install -D script-loade

2 main.js全局引入Blob.js和Export2Excel.js

import Blob from './excel/Blob.js'
import Export2Excel from './excel/Export2Excel.js'

3 build目录下webpack.base.conf.js配置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/styles/vars.scss',
      'excel': path.resolve(__dirname, '../src/excel'),//新增加一行
    }
  },

4 主要代码

HTML:

<el-button type="primary" class="checkBtn" style="position:relative;width:120px" @click="updata">导入Excel </el-button>

<input id="input-file" type=&#