vue下载表单文件流功能实现

如果会御剑

于 2022-04-27 14:55:02 发布

阅读量999

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_44694389/article/details/124450600

版权

本文介绍了在Vue.js中如何实现下载表单文件流的功能。主要涉及封装下载接口，处理API接口设置responseType为"blob"，利用utils文件处理下载逻辑，包括筛选条件的处理和节流函数的应用，并在请求拦截器中处理文件流下载时可能出现的错误。

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

1.封装下载接口，在api文件新建exportinfo.js文件，在utils文件新建exportinfo.js文件。

2.api文件处理接口文件，代码如下：

import request from '@/utils/request'

//导出学生管理数据
export function exportStudentInfo(data) {
  return request({
    url: '/index.php?m=School&c=Export&a=ExportStudentInfo',
    method: 'post',
    data,
    responseType: "blob"
  })
}

responseType: "blob"是必传的，不然下载失败

3.utils文件处理下载文件功能，代码如下：

import { exportStudentInfo } from '@/api/exportinfo'
import { Message } from 'element-ui'

//导出学生管理表格信息
export function exporttableInfo(obj=null){
  return new  Promise((resolve, reject)=>{
    exportStudentInfo(obj).then(res=>{
      handleFile(res)
      resolve()
    }).catch((error)=>{
      console.log(error)
    })
  })
}

//处理文件
export function handleFile(res){
  i

最低0.47元/天解锁文章