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

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


背景

项目中时常需要从后端下载文件到本地,如下载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);
  }
目录
相关文章
|
2天前
|
前端开发 JavaScript Java
前端与后端:构建现代Web应用的双翼
前端与后端:构建现代Web应用的双翼
|
15天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
15天前
|
Web App开发 移动开发 运维
跨域解决方案[前端+后端]
跨域解决方案[前端+后端]
25 0
|
16天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
17天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
18天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
20天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
33 0
|
1月前
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
30 0
|
1月前
|
存储 前端开发 JavaScript
从前端到后端,探索现代Web开发技术
本文探索了现代Web开发技术的各个方面,包括前端和后端开发以及多种编程语言的应用。通过对JavaScript、Java、Python、C、PHP和Go等语言的介绍,深入探讨了前端和后端开发的基本原理和常用工具。同时,还涵盖了数据库技术在Web开发中的重要性和应用场景。无论你是初学者还是有经验的开发者,本文都能为你提供全面的视角和实用的知识,帮助你在Web开发领域取得更好的成果。
|
2月前
|
前端开发 JavaScript Java
从前端到后端:构建全栈应用的技术路线探析
【2月更文挑战第3天】本文通过探讨前端和后端开发的基本概念和技术要点,深入剖析了构建全栈应用的技术路线。从前端的HTML、CSS和JavaScript,到后端的Java、C和数据库,我们将带您逐步了解如何将不同技术组合起来实现高效、稳定的全栈应用。
56 7