前端接受后端文件流并下载到本地的方法

简介: 前端接受后端文件流并下载到本地的方法


背景

项目中时常需要从后端下载文件到本地,如下载excel模板,或者合同文件之类的,前端应该如何处理后端返回的文件流并下载到本地呢?

法一:针对get方法的文件流下载

此方法是最为简单的,直接将页面路径重新定向到后端请求文件流的接口地址即可

window.location.href = '后端的文件流下载接口地址';

法二:针对get和post通用的文件流下载

配置axios

import axios from 'axios';
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 30000,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
});
// 请求拦截
service.interceptors.request.use(
  (config) => {
    config.headers['X-User-Token'] = localStorage.getItem('token');
    return config;
  },
  (error: any) => {
    Promise.reject(error);
  },
);
// 响应拦截
service.interceptors.response.use(
  (response: any) => {
    const res = response.data;
    if (response.config && response.config.responseType === 'blob') { // 判断是不是下载请求
      const excelUrl = window.URL.createObjectURL(new Blob([res]));
      const link = window.document.createElement('a');
      const fileName = JSON.parse(response.config.data).fileName; // 文件名
      const suffix = JSON.parse(response.config.data).suffix; // 文件后缀
      const isDownload = JSON.parse(response.config.data).isDownload; // 是否是下载(如果不是下载则为导出)
      link.href = excelUrl;
      link.download = `${fileName}.${suffix ? suffix : 'xlsx'}`;
      document.body.appendChild(link); // 兼容FireFox
      link.click();
      window.URL.revokeObjectURL(excelUrl);
      link.remove(); // 兼容FireFox
      console.log(isDownload ? '下载成功!' : '导出成功!')
    }
    return Promise.resolve(res); // 下载文件可能没code情况
  },
  (error: any) => {
    return Promise.reject(error);
  },
);
export default service;

请求方法

// 下载合同
import $axios from '@/utils/axiosUtil';
export const downloadProtocol = (data: any) => {
  return $axios({
    url: `后端的下载地址`,
    method: 'get',
    responseType: 'blob',
    data,
  });
};

组件调用

// 下载合同
  private async uploadProtocol() {
    const params = {
      applyId: this.applyId,
      fileName: '合同协议',
      suffix: 'zip',
      isDownload: true,
    };
    const res: any = await downloadProtocol(params);
  }
目录
相关文章
|
21小时前
|
前端开发 JavaScript
前端 JS 经典:文件流下载
前端 JS 经典:文件流下载
5 0
|
1天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
1天前
|
前端开发 JavaScript Java
npm与Maven:前端与后端构建工具深度对比学习
npm与Maven:前端与后端构建工具深度对比学习
|
2天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发者的必备技能
随着互联网技术的不断发展,全栈开发者的需求日益增长。本文将介绍如何从前端到后端,掌握全栈开发所需的关键技能,包括前端框架的选择、后端语言的学习以及数据库的应用,帮助读者构建成为全面的技术专家。
|
3天前
|
前端开发 测试技术 持续交付
《跨界合作:前端与后端如何优化协作效率》
在当今软件开发领域,前端和后端开发团队通常是分开工作的,但他们的协作质量直接影响着项目的成功与否。本文将探讨如何通过优化前端与后端的协作方式,提高开发效率和项目质量,从而实现更好的跨界合作。
|
3天前
|
监控 Java 开发者
构建高效微服务架构:后端开发的新趋势
【5月更文挑战第13天】随着现代应用的复杂性日益增加,传统的单体应用架构已不足以满足快速迭代和可扩展性的需求。本文将探讨如何通过微服务架构来提升后端开发的效率和系统的可靠性,涵盖微服务设计原则、技术栈选择、部署策略以及维护实践。我们将分析微服务的优势与挑战,并提供一系列实施建议,帮助开发者在构建和维护分布式系统时做出明智决策。
|
3天前
|
存储 监控 API
构建高效微服务架构:后端开发的新趋势
【5月更文挑战第13天】在现代软件开发中,随着业务需求的多样化和开发流程的复杂化,传统的单体应用架构逐渐显得笨重且难以适应快速变化。微服务架构作为一种新兴的分布式系统设计方式,以其灵活性、可扩展性和技术多样性受到广泛关注。本文旨在探讨微服务架构的核心概念、设计原则以及实施策略,为后端开发人员提供一种提升系统性能和开发效率的有效途径。
42 2
|
3天前
|
存储 监控 API
构建高效微服务架构:后端开发的现代实践
【5月更文挑战第9天】 在本文中,我们将深入探讨如何在后端开发中构建一个高效的微服务架构。通过分析不同的设计模式和最佳实践,我们将展示如何提升系统的可扩展性、弹性和维护性。我们还将讨论微服务架构在处理复杂业务逻辑和高并发场景下的优势。最后,我们将分享一些实用的工具和技术,以帮助开发者实现这一目标。
|
3天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
14 0
|
3天前
|
消息中间件 Java 持续交付
构建高效微服务架构:后端开发的新视角
【5月更文挑战第15天】在现代软件开发的浪潮中,微服务架构已成为推动技术创新和服务灵活性的关键因素。本文将探讨如何构建一个高效的微服务架构,包括关键的设计原则、技术栈选择以及持续集成与部署的最佳实践。通过分析微服务的优势和挑战,我们将为后端开发人员提供一个全面的指导,帮助他们在构建可扩展、容错且易于维护的系统时做出明智的决策。