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

最新推荐文章于 2025-02-26 11:54:48 发布

Jolly_zhang

最新推荐文章于 2025-02-26 11:54:48 发布

阅读量1.3k

点赞数 9

分类专栏： Vue2 JS 文章标签： excel 前端 javascript

本文链接：https://blog.csdn.net/Jolly_zhang/article/details/135392871

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、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.saveAs

最低0.47元/天解锁文章