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

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


背景

项目中时常需要从后端下载文件到本地,如下载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);
  }
目录
相关文章
|
26天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
19 1
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
143 0
|
1月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
92 0
|
1月前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
23 0
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
236 0
|
1月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
10天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
9天前
|
JSON 前端开发 API
后端开发中的API设计与文档编写指南####
本文探讨了后端开发中API设计的重要性,并详细阐述了如何编写高效、可维护的API接口。通过实际案例分析,文章强调了清晰的API设计对于前后端分离项目的关键作用,以及良好的文档习惯如何促进团队协作和提升开发效率。 ####
|
11天前
|
存储 SQL 数据库
深入浅出后端开发之数据库优化实战
【10月更文挑战第35天】在软件开发的世界里,数据库性能直接关系到应用的响应速度和用户体验。本文将带你了解如何通过合理的索引设计、查询优化以及恰当的数据存储策略来提升数据库性能。我们将一起探索这些技巧背后的原理,并通过实际案例感受优化带来的显著效果。
29 4

热门文章

最新文章