2017-05-08 47 views
2

我正在开发客户端(Angular)和服务器(PHP)。AngularrJS termporarilly禁用HREF链接

我希望用户能够下载CSV文件,PHP文件是从MySql服务器获取的数据中生成的。

我正在使用<a HREF...链接(我使用CSS来使它看起来像一个按钮),因为这似乎是让浏览器打开保存位置的文件选择对话框的最简单方法。

但是,我有.CSV文件类型与Excel相关联,我相信很多用户也会有。

尽管文件读取速度相当快,但加载Excel需要几秒钟的时间,所以看起来没有任何事情发生,毫无疑问,用户会反复点击(我甚至自己也这样做),获取新文件每一次。

我想要做的是在点击后禁用链接,然后在文件下载时重新启用它 - 但我不知道如何检测下载(因为我使用的是HREF而不是$HTTP ,我可以在.then()中重新启用)。

有什么建议吗?我正在考虑只是抛出一个模式“这将需要几秒钟”,希望文件在用户关闭之前到达。

+1

下载超出窗口范围 – charlietfl

回答

1

我过去成功地使用了这种模式 - 您使用$ http,因此您知道何时下载完成,然后创建一个锚点标记,并指向新下载的文件,然后触发点击事件锚以将控制权传递给浏览器以进行保存/打开等:

$http.get('yourUrlPath').then(function(object) { 
var anchor; 
    anchor = angular.element('<a/>'); 
    return anchor.attr({ 
    href: 'data:attachment/csv;charset=utf-8,' + encodeURI(object.data), 
    target: '_blank', 
    download: "somefilename.csv" 
    })[0].click(); 
}, function(httpError) { 
    throw httpError.status + " : " + httpError.data; 
}); 
+0

偷偷摸摸!但是,它看起来不错:-)我会尝试一下并回复你 – Mawg

+0

在你插入DOM的锚标签上点击一下后,你是否应该删除它? – Mawg

+1

我不这么认为。因为我只是创建一个本地JS变量(恰好是一个元素),所以应该在函数返回时进行垃圾回收。注意元素从来没有实际插入到dom中,只是保存在内存中。 –