前端实现获取后端返回的文件流并下载

前端实现获取后端返回的文件流并下载

  • 方法一:使用Axios实现文件流下载
      • 优点
      • 缺点
  • 方法二:使用封装的Request工具实现文件流下载
      • 优点
      • 缺点
  • 方法三:直接通过URL跳转下载
      • 优点
      • 缺点
  • 结论

在前端开发中,有时需要从后端获取文件流,并将其下载到本地。本文介绍如何在前端实现此功能的不同的实现方法,并分析其优缺点

方法一:使用Axios实现文件流下载

使用Axios实现文件流下载的方法,本人亲测可以实现

import axios from 'axios';
import {
    getToken } from '@/utils/auth'

handleExport() {
   
  // 接口调用获取文件
  axios({
   
    method: 'get',
    responseType: 'blob', // 指定响应类型为blob
    url: this.GLOBAL.baseURL + '/api/v1/business/user/export',
    data: this.queryParams, // 导入文件一般都用FormData格式数据
    headers: {
    'Authorization': 'Bearer ' + getToken() } // 传递token进行身份验证
  }).then(res => {
   
    if (res.code === 200) {
   
      // 导入成功
      this.

你可能感兴趣的:(vue,前端,vue.js,springboot,javascript,axios)