Javascript Blob（）不会在第一次单击中创建文件

Mahan 发表于 Dev

马汉

<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>我在“欣赏各种解决方案和技巧”中访问的标签。提前致谢！

马汉

通过创建新<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);
        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。