vue2项目实现excel文件导入导出和拖拽上传

最新推荐文章于 2025-10-28 16:58:11 发布

原创

最新推荐文章于 2025-10-28 16:58:11 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#excel #前端 #javascript

本文详细描述了如何使用axios和file-saver库实现Excel文件的导出（生成Blob并下载）以及导入功能，包括通过文件选择、拖拽上传，并展示了Vue组件中的相关代码片段。

文章目录

一、excle文件导出
二、excel文件导入
三、文件拖拽上传
四、完整代码

文件导入导出实现逻辑图：
在这里插入图片描述

一、excle文件导出

在这里插入图片描述

导出员工接口返回的是二进制流
axios配置responseType为blob接收二进制流文件为Blob格式
安装file-saver包，实现下载Blob文件 yarn add file-saver
封装导出员工excel的API-代码位置

//excel模板下载接口
export function exportTemplate(){
   
   
	return request({
   
   
		url:/cms/userSession/enterprise/enterpriseConfigImportTemplate",
		method:'post',
		responseType:'blob',// 改变接收数据的类型,使用blob接收二进制文件流
	})
}

拦截器判断是不是blob类型，如果是直接返回数据，不再进行解构-代码位置(src/utils/request.js)

// 响应拦截器
service.interceptors.response.use((response) => {
   
   
  // axios默认包裹了data
  // 判断是不是Blob
  if (response.data instanceof Blob) return response.data // 返回了Blob对象
  const {
   
    data, message, success } = response.data // 默认json格式
  if (success) {
   
   
    return data
  } else {
   
   
    Message({
   
    type: 'error', message })
    return Promise.reject(new Error(message))
  }
},

安装file-saver

$ npm i file-saver
$ yarn add file-saver

点击“下载模版”按钮调用接口，使用file-saver将blob转化成文件下载-代码位置

// 员工下载模版-----------------------
    async downloadEmployee() {
   
   
      const blob = await downloadEmployee()
      FileSaver

最低0.47元/天解锁文章