Javascript “另存为”blob从给定url下载文件花费的时间太长
我已经编写了以下服务来保存给定URL中的文件Javascript “另存为”blob从给定url下载文件花费的时间太长,javascript,angularjs,download,blob,save-as,Javascript,Angularjs,Download,Blob,Save As,我已经编写了以下服务来保存给定URL中的文件 (function() { angular.module('SOME_APP') .service("downloadService", downloadService); function downloadService($http){ var downloadFileFromUrl = downloadFileFromUrl; function down
(function() {
angular.module('SOME_APP')
.service("downloadService", downloadService);
function downloadService($http){
var downloadFileFromUrl = downloadFileFromUrl;
function downloadFileFromUrl(url){
if(!url.length){
//TO-DO handle the error
}
else{
//find the file name and extension, to save it as:
var fileName;
for(var i=url.length; i>=0; i--){
if(url[i]=='/'){
fileName=url.slice(i+1, url.length);
console.log(fileName);
break;
}
}
$http({
url: url,
method: "GET",
responseType: 'arraybuffer'
}).success(function (data) {
var blob = new Blob([data], {type: '*/*'});
saveAs(blob, fileName);
}).error(function (data) {
console.log(data);
//TO-DO error handling
});
}
}
return {
downloadFileFromUrl : downloadFileFromUrl
}
}
}());
当我调用服务时,服务首先下载文件,下载完成后,它会在浏览器中显示下载(进度为100%)。我如何使它正常工作?(在浏览器中启动下载,并逐步显示进度)我的目的是从给定的url下载一个文件。我使用HTML5锚定标记和下载属性实现了它,如下所示: 在index.html中:
<a id='downloadTag' href="" download hidden></a>
这就解决了我的问题。为什么不设置一个计时器呢?不能同时设置两个计时器。您无法下载本机浏览器并获得进度通知。您需要设置一个常规的XmlHttpRequest并添加一个进度侦听器,或者在
$http
中找到一种操作底层XHR对象的方法来添加侦听器。每次数据到来时都要保存它,这不是最好的下载方式。最好为传入数据注册事件,并知道何时完成事务。如果您希望它像下载一样简单,您可以提供一个指向标记html的链接,并为其提供下载属性。只需为您下载
document.getElementById("downloadTag").href=url;
document.getElementById("downloadTag").click();