Javascript Blob() 不会在第一次点击时创建文件答案

【问题标题】：Javascript Blob() does not create file in first clickJavascript Blob() 不会在第一次点击时创建文件
【发布时间】：2018-01-10 06:38:49
【问题描述】：

<a href="" 
   ng-click="$ctrl.downLoadFile(file)" 
   ng-attr-id="{{file.id}}">{{file.filename}}</a>

点击上面的<a> 标记会从服务器获得file.csv。在success 方法中，我创建了文件。但问题是它不会在第一次点击时下载它。第一次，我必须点击两次才能下载文件。第二次点击后，它按预期工作。

如何解决这个问题？我也希望它在第一次点击时也能正常工作。

这里是代码。

    downloadService.getFile(file).then(
        function success(response) {
            var data = response.data,
            filename = file.filename.split("/"),
            name = (filename[filename.length - 1]),
            blob = new Blob([data], {type: 'application/octet-strea'}),
            url = $window.URL || $window.webkitURL,
            fileUrl = url.createObjectURL(blob);
            var anchor = angular.element(document.getElementById(
                         file.id.toString()));
            anchor.attr({
                href: fileUrl,
                target: '_blank',
                download: name
            })
            }
        );

这是我访问的<a> 标签欣赏各种解决方案和技巧。提前致谢！

【问题讨论】：

标签： javascript angularjs blob

【解决方案1】：

通过创建新的<a> 标签解决了这个问题。

function success(response) {
          var data = response.data,
            blob = new Blob([data], {type: 'application/octet-stream; charset=UTF-8'}),
            url = $window.URL || $window.webkitURL,
            fileUrl = url.createObjectURL(blob);

          var anchor = document.createElement('a');

          anchor.href = fileUrl;
          anchor.target = '_blank';
          anchor.download = name;
          anchor.style = "display: none";

          document.body.appendChild(anchor);
          anchor.click();

          setTimeout(function () {
            document.body.removeChild(anchor);
            $window.URL.revokeObjectURL(fileUrl);
          }, 100);
        }

【讨论】：