在链接上进行JQuery处理后下载文件

Question

我正在通过链接下载文件，并希望在链接下载之前处理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;
});

Answer 1

您可以使用条件语句执行此操作。在我的示例中，我使用confirm method，但您也可以使用自定义是/否设计执行此操作。

代码的作用是提示用户确认他们要下载文件，如果用户点击“ok”则文件将下载，否则如果他们点击“取消”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>

Answer 2

如果用户同意，您可以设置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();
    }
});

Answer 3

如果用户按“是”，则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