概要

前端上传文件的例子很多, 但是下载相关的例子不多, 主要是因为下载本身比较简单.

但是这次做了个文件导出功能, 接收文件流的时候弄了很长时间也没有成功, 就因为请求中缺了个配置…

示例

后端

后端比较简单, 不管有多少需要计算的业务, 最终只是返回文件流.

下面的示例是通过 golang gin 框架实现的.

 1  package main
2
3 import (
4 "strconv"
5
6 "github.com/gin-gonic/gin"
7 )
8
9 func main() {
10 route(8000)
11 }
12
13 func route(port int) error {
14
15 r := gin.Default()
16 apiV1 := r.Group("/api/v1")
17
18 // file download
19 apiV1.GET("/download/:fileName", DownloadFile)
20
21 return r.Run(":" + strconv.Itoa(port))
22 }
23
24 func DownloadFile(c *gin.Context) {
25 fileName := c.Param("fileName")
26
27 c.File("./download/" + fileName)
28 }

根据 url 中的文件名, 直接返回 download 文件夹下的某个文件

前端

前端一般有以下几种情况的下载:

直接显示图片

直接将文件流赋给 img 的 src 就行

1  <img src={"http://localhost:8000/api/v1/download/test.png"} width={50} height={60} />

提供下载链接, 点击后下载

1  <a href={"http://localhost:8000/api/v1/download/test.pdf"} />

文件导出, 前端没有显示下载链接的位置

这种方式需要前端模拟一个 a 标签的点击, 从而实现文件的下载.

 1  export async function exportFile(params) {
2 return postJson('/api/v1/download/test.xlsx, params, 'blob').then((res) => {
3 let url = URL.createObjectURL(new Blob([res]));
4 let filename = '导出记录.xlsx';
5 let a = document.createElement('a');
6 a.href = url;
7 a.download = filename;
8 a.click();
9 URL.revokeObjectURL(url);
10 });
11 }
12
13 const postJson = async (url, params, responseType = '') {
14 const response = await request(url, {
15 method: 'POST',
16 header: {
17 'Content-Type': 'application/json',
18 },
19 data: params,
20 responseType: responseType,
21 });
22
23 // 省略... (对response的一些处理)
24
25 return Promise.resolve(response);
26 }

这里有个关键的配置 responseType: 'blob' 这个配置不在 header 中,

和 header, data 是平级的. (当时就是这个配置导致导出功能卡了半天, 如果没有这个配置, 导出之后会显示文件已经损坏)

antd pro 下的文件下载的更多相关文章

  1. 6. 使用antd pro构建web页面

    前言 在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段.这里假定我们已经了解了react,redux和dva/umi相关的知识.并有做过相关练习. 如果还 ...

  2. antd pro中如何使用mock数据以及调用接口

    antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步 在dva中主要分为3层 services  models  components models层用于存放数据 ...

  3. 自定义Antd Pro 默认元素

    概要 通用元素 修改的方式 主页面 标签上的图标 logo 和 系统名称 footer 的配置 loading 页面 最终效果 概要 使用 Antd Pro 来开发前端项目时, 生成的项目模板中, 一 ...

  4. antd pro 路由

    概要 antd pro 路由简介 路由, 菜单和面包屑 页面之间的路由 带参数的路由 总结 概要 路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用 ...

  5. 20180726 - Windows 10 Pro 下远程桌面连接提示“出现身份验证错误”

    问题:Windows 10 Pro 下远程桌面连接提示“出现身份验证错误” [Window Title]远程桌面连接 [Content]出现身份验证错误.要求的函数不受支持 远程计算机: 192.16 ...

  6. 学习 Antd Pro 前后端分离

    1.前言 最近学习reactjs ,前些年用RN开发过移动端,入门还算轻松.现在打算使用 Antd Pro 实现前后端分离.要使用Antd Pro这个脚手架,必须熟悉 umi.dva.redux-sa ...

  7. 强大的table组件-antd pro table

    概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表 ...

  8. antd pro table中的文件上传

    概述 示例代码 列表页面 form 页面 model.js service.js 总结 概述 项目中经常会遇到在表格中展示图片的需求(比如展示用户信息时, 有一列是用户的头像). antd pro t ...

  9. java web 下实现文件下载

    来自:http://blog.csdn.net/longshengguoji/article/details/39433307 需求:实现一个具有文件下载功能的网页,主要下载压缩包和图片 两种实现方法 ...

随机推荐

  1. Java反射(一)

    什么是反射? 在程序的运行过程中,可以动态的创建对象. 反射的基石是什么? 字节码对象是反射的基石.字节码对象:Java类文件通过javac进行编译后生成的xxx.class文件,此文件由jvm加载至 ...

  2. vue中实现后台管理路由标签页

    <template> <section> <div class="navTabList el-tabs__nav-scroll" id="t ...

  3. 不用写代码也能做表单 —— 加载meta即可

    做增删改查要写多少代码? 一个表单一套代码,十个表单十套代码吗? 我这么懒,怎么会写这么多代码? 我想做到:即使一百个表单也只需要一套代码(而且不需要复制粘贴).实现多个表单,只需要加载不同的meta ...

  4. 【微信小程序】常用组件及自定义组件

    (一) 常用标签 组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XS ...

  5. JVM垃圾回收器前瞻

    垃圾回收器的新发展   GC仍然处于飞速发展之中,目前的默认选项G1 GC在不断的进行改进,很多我们原来认为的缺点,例如串行的Full GC.Card Table扫描的低效等,都已经被大幅改进,例如, ...

  6. 首发!Alibaba内部:Spring源码培训课件笔记曝光!

    本文包含的内容 Spring占有的市场 阅读源码的重要性 阅读源码困难度 课件笔记的主要内容 Spring占有的市场 先来简单说一下现在各个企业常用并与Spring相关的: ssh = spring ...

  7. rabbitmq的安装&学习

    主要按照 https://www.cnblogs.com/web424/p/6761153.html https://www.cnblogs.com/qiyebao/p/4822583.html 学习 ...

  8. 接口、RESTful规范、DRF

    接口 #接口:url连接,通过向链接发送不同的类型请求与参数得到相应的响应数据 #1.在视图书写处理请求的 视图函数 #2.在路由层为视图函数配置 url链接=>产生接口 #3.前台通过ajax ...

  9. Map遍历法则

    /** * 如果既要遍历key又要value,那么建议这种方式,应为如果先获取keySet然后再执行map.get(key),map内部会执行两次遍历. * 一次是在获取keySet的时候,一次是在遍 ...

  10. Orchard Core创建CMS/Blog站点

    安装.NET Core SDK 下载并安装当前最新版本.NET Core SDK 3.1: https://dotnet.microsoft.com/download 安装visual studio ...