概要

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

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

示例

后端

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

下面的示例是通过 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. Sender(agumaster_crawler)->RabbitMq->Reciever(agumaster)

    发送方: package com.heyang.agumasterCrawler; import java.util.List; import org.springframework.beans.fa ...

  2. java 二维码生成(可带图片)springboot版

    本文(2019年6月29日 飞快的蜗牛博客) 有时候,男人和女人是两个完全不同的世界,男人的玩笑和女人的玩笑也完全是两码事,爱的人完全不了解你,你也不要指望一个女人了解你,所以男的不是要求别人怎么样, ...

  3. 通过例子讲解Spring Batch入门,优秀的批处理框架

    1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! Spring相关文章:Springboot-Cloud相关 Spring Batch是一个轻量级的.完善的批处理框架,作为S ...

  4. smbms系统中引用的js文件出现乱码

    问题如下显示: 时间显示出现了乱码,找到显示该时间的js文件,定位问题出现的地方. 解决方案: 改变该文件的编码方式,这里的使用了vscode进行改变js文件的编码方式 步骤如下: 使用vscode打 ...

  5. JumpServer 架构浅解

    Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent.完全开源,GPL授权 设计思路 设计一个跳转网关,所有 ...

  6. python3 for

    当range中只有一个参数时,此参数表示终点,但不包括.(从0开始) 当range中有两个参数时,分别表示起点和终点.(左闭但不包括终点) 当range中有三个参数时,分别表示起点和终点,和步长,意思 ...

  7. linux如何把普通用户添加到sudo组

    sudo原理:运行命令时,系统检查/etc/sudoers 配置文件,看这个用户是否有执行sudo的权限,如果有权限,系统要求输入用户自己的密码,如果密码输入正确,系统会以root身份运行 passw ...

  8. [LeetCode]55. 跳跃游戏(贪心)

    题目 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: tr ...

  9. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  10. docker部署rockermq集群(docker-compose版本)

    此处采用docker-compose部署 rockermq主主集群模式 创建相关文件夹 此处创建的文件一一对应docker-compose.yml文件中的映射文件夹,酌情创建,主要需要创建配置文件夹. ...