生成内容型的下载接口如何给前端友好提示？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2653 天前的主题，其中的信息可能已经有所发展或是发生改变。

有一个接口是专门为 web 前端生成图片以提供给下载的，地址类似这样：
http://www.domain.com/create/image
后端直接生成图片内容，修改 Response 的 ContentType 为 image/jpeg，前端以 get 方式直接点击这个接口地址，就会在浏览器弹出下载保存框。
我们为了防止前端出现恶意频繁访问，于是针对 cookie 限制了当前一个请求还未处理完时，后一个请求不会进入生成图片逻辑，而是直接返回，但是现在问题出在返回内容上，不管我返回任何内容，都会导致当前页面的 dom 内容被这个新内容彻底覆盖，因为是 get 请求且不是 ajax 的。所以没法做到只改局部内容。我们希望能给予用户比较友好的提示，但是不要修改当前页面的内容。有没有办法实现这一点

生成

内容

请求

12 条回复 2018-09-13 12:05:10 +08:00

6IbA2bj5ip3tK49j

2018-09-12 21:30:15 +08:00

一张固定的图片，提示用户正在加载中？

leekafai

2018-09-12 21:30:34 +08:00 via Android

Response.AppendHeader("Content-Disposition","attachment;filename=FileName.txt");

billlee

2018-09-12 22:42:15 +08:00

我怎么觉得最简单的方法是把前端改成 ajax

abcbuzhiming

2018-09-12 22:53:24 +08:00

@billlee ajax 不能下载啊

westoy

2018-09-12 22:53:59 +08:00

iframe 大法好

abcbuzhiming

2018-09-12 23:23:24 +08:00

@westoy 请讲一下具体实施办法

libook

2018-09-13 00:46:04 +08:00

请求的时候加上 query 参数，把当前页面的地址传给服务器，服务器鉴权，如果判定合法就返回真实内容，判断不合法就返回 307 的状态，重定向地址为原发起下载的页面地址，后面拼接状态参数，原页面上做一个常规检查，只要遇到这个状态参数就展示友好提示。

panpanpan

2018-09-13 08:14:34 +08:00 via iPhone

@abcbuzhiming 通过 file api
去保存

forgcode

2018-09-13 08:56:37 +08:00 via Android

单独这个鉴权的借口，通过了在给下！

xiangyuecn

2018-09-13 10:20:49 +08:00

@westoy iframe 大法+1，普通的表单上传、普通的连接下载，target 到 iframe 中执行，和 xhr 异曲同工

abcbuzhiming

2018-09-13 11:53:39 +08:00

@xiangyuecn iframe 大法还是存在一个问题，无法确认事件发生，我不知道何时下载开始，因为从点击按钮到下载正式开始(或结束)有一段时间。这段时间内，下载按钮在前端应该屏蔽，让用户无法点击，然后在下载开始或结束时重新激活下载按钮。这个在 ajax 里很容易，但是在这种非 ajax 操作里面就无比困难。。。

xiangyuecn

2018-09-13 12:05:10 +08:00

@abcbuzhiming 那就用 ajax 啊，把数据先 load 下来，然后给一个按钮，让用户点击保存。blob+a 标签 download

或者下载完得到 blob 对象后，自动弹保存示例代码：

var url=URL.createObjectURL(
new Blob(["abcd"],{"type":"text/plain"})
);
var downA=document.createElement("A");
downA.innerHTML="不让点";
downA.href=url;
downA.download="data.txt";
document.body.appendChild(downA);
downA.click();