a标签的href 和click事件并存,实现下载文件

时间:2022-11-02 08:15:17

前端实现文件自动下载

先说下业务逻辑,要导出查询某个用户的聊天内容纪录,输入查询条件,点击导出按钮,后台返回文件的路径,然后自动下载下来。
其实很简单,这次利用H5新属性 a标签的download属性 <a href="文件路劲" download="生成文件的名称"></a>
其中产生的问题是: 通过ajax请求返回路径赋值给a标签的href属性,然后用js实现click事件,去触发a标签,但是 a标签的直接 click事件不会出发, ! 后来发现 要触发a标签的click事件,不能直接绑定a标签,要绑定在a标签的内部的元素里,所以在a标签里加了个标签来实现a标签的点击
给一个最简化的列子把:
<a id="downA" href="" download><span id="downFile"></span></a>

$.post('url...',data,function(res){
$("#downA").attr("href",res);
$("#downFile").click();
});

这样才实现!
错误示范:

$.post('url...',data,function(res){
$("#downA").attr("href",res).click();(这是我一开始想的,但是是错的)
});