对链接进行 JQuery 处理后下载文件答案

【问题标题】：Download File after JQuery processing on a link对链接进行 JQuery 处理后下载文件
【发布时间】：2017-03-22 00:36:39
【问题描述】：

我正在通过链接下载文件，想在链接下载之前处理JS。通过 JS，我展示了一个模态，如果一个人同意，链接应该下载文件，如果一个人不同意，文件不应该下载。

以下是我的尝试。我希望它停止，直到用户按下是/否，然后它继续下载或不下载。

有没有办法通过JS做到这一点？

链接：-

<a class="download-video" href="http://mylink.mp4?file=1&name=A Video" download> Download</a>

这是我从question:-

中尝试的

$('a.download-video').click(function(event) {

    var href = this.href;
    e.preventDefault();  //stop the browser from following
    window.location.href = href;
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用条件语句来做到这一点。在我的示例中，我使用的是 confirm method，但您也可以使用自定义是/否设计来做到这一点。

代码的作用是提示用户确认他们要下载文件，如果用户点击“确定”，则文件将下载，否则如果点击“取消”，则调用event.preventDefault();取消下载.

$('a.download-video').click(function(event) {
    if (!confirm('Download File?')) {
      event.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="download-video" href="https://www.w3schools.com/html/mov_bbb.mp4?file=1&name=A Video" download> Download</a>

【讨论】：

我希望下载文件，只有当有人按下“是”时，即使没有按下“是”按钮也会下载。
不，因为如果他们点击“取消”，那么它将触发event.preventDefault()，从而阻止文件被下载。

【解决方案2】：

您应该有一个var，如果用户按“是”，则可能是true，如果用户按“否”，则可能是false。之后：

$('a.download-video').click(function(event) {
    var href = this.href;
    e.preventDefault();  //stop the browser from following
    if(booleanVar){
        var anchor = document.createElement('a');
        anchor.href = this.props.download_url;
        anchor.target = '_blank';
        anchor.download = this.props.file_name;
        anchor.click();
    }
    else window.location.href = href;
});

供参考：Force download through js or query

【讨论】：

它确实重定向但不通过此代码下载。

【解决方案3】：

如果用户同意，您可以设置data-href 属性并使用它：

<a class="download-video" href="#" data-href="http://mylink.mp4?file=1&name=A Video"> Download</a>

$('a.download-video').click(function(event) {
    // logic
    if(allGood) {
       var link = $(this).attr('data-href');
       $('<a href="'+link+'" download style="visibility:none"></a>').appendTo('body').click();
    }
});

【讨论】：

@Steve 现在试试。