请问下载的图片在不需要人为设置的情况下如何重命名?

Question

比如说,我利用a标签的download属性下载了一张图片，然后图片的名字是thumbnail_160.jpg，

var a = $("<a>").attr("href", "http://oss-cn-shanghai.aliyuncs.com/j3ddev/contents/2a547c60-01e6-492c-b9c7-8e2cd72715b8/thumbnail_160.jpg").attr("download", ".jpg").appendTo("body");
a[0].click();

这个链接是某条数据的一个属性值，
这时候我想下载的图片名字与这条数据某属性值一样,且不需要我人为设置输入，有什么办法吗？

Answer 1

如果使用a标签的download属性来下载文件，要达到你想要的效果，那么首先你要把属性值取出来。然后就是下载时的命名问题。

<a href="xxx.jpg" download="myname.jpg">下载</a>

如果你下载时要使用指定的名字，其实像你这样的和我上面示例中的情况其实都是不行的，文件还是按原来的名字保存，因为文件原本就有名字。

那么何时会生效呢？如果href链接的文件没有文件名（如blob对象，或base64编码的图片），由于其自身没有名字，所以浏览器会使用download属性的值作为文件名。

所以你需要把图片转换一下。你可以用new image()来加载这个图片，之后使用canvas绘制，最后使用canvas.toDataURL()或canvas.toBlob()来转换。

把图片转换后的结果放到a标签的href里，要使用的名字放到download属性里，就可以了。

Answer 2

如果属性有一个值，它将在保存提示中用作预先填写的文件名 (用户仍然可以根据需要更改文件名)。对允许的值没有限制，但是/和被转换为下划线。大多数文件系统限制文件名中的一些标点符号，浏览器会相应地调整建议的名称。

来源 https://developer.mozilla.org...

download 可以预设文件名的吧？

Answer 3

服务器加个handler，收到文件下载请求时往response中增加如下header（文件名不要忘了urlencode处理）：
Content-Disposition：attachment; filename=XXXXXX.jpg