在浏览器中下载文件

Question

在我的网页上，我有用于下载mp3文件的链接。

用户单击后，我会进行ajax调用并在服务器上创建一个mp3文件。

我将文件的路径返回到脚本，但是现在，如何使它下载用户系统？

<SCRIPT TYPE="text/javascript">
    function voice(id){
        $.ajax({
                url:'/download/',
                type:"POST",
                data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
                success:function(return_data) {
                    alert(return_data['url']);
                },
                error: function(){
                    alert("Some Error");
                }
            });
    }
</SCRIPT>

我在警报中得到了mp3文件的网址，但如何下载呢？

谢谢。

Answer 1

在HTML中创建一个使用CSS隐藏的锚标签

 <a href="#" id="someID" class"hiddenUrl" style="visibility: hidden" target="_blank">Hidden</a>

在你的javascript中

<SCRIPT TYPE="text/javascript">
    function voice(id){
        $.ajax({
                url:'/download/',
                type:"POST",
                data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
                success:function(return_data) {
                  var url= return_data['url'];
                   $('.hiddenUrl').attr('href',url) //adding value to the href attribute
                    $('.hiddenUrl').attr('download','any_filename.mp3');
                     $('.hiddenUrl')[0].click();

                },
                error: function(){
                    alert("Some Error");
                }
            });
    }
    </SCRIPT>

Answer 2

您可以执行window.location = return_data['url']; 假设您有一个以http开头的网址...这种方法等效于用户单击mp3的链接。 另一种方法是创建一个src设置为新创建的链接的iframe。 使用此方法，用户的浏览器将提示您下载文件，而无需更改位置（从当前页面导航）。 我建议第一种方法。

Answer 3

这应该工作：

<SCRIPT TYPE="text/javascript">
    function voice(id){
        $.ajax({
            url:'/download/',
            type:"POST",
            data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
            success:function(return_data) {
                window.location.href = return_data['url'];
            },
            error: function(){
                alert("Some Error");
            }
        });
}
</SCRIPT>

Answer 4

I think this will work
 <SCRIPT TYPE="text/javascript">
        function voice(id){
            $.ajax({
                url:'/download/',
                type:"POST",
                data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
                success:function(return_data) {
                    var url= return_data['url'];
                    window.location.assign(url);
                },
                error: function(){
                    alert("Some Error");
                }
            });
    }
    </SCRIPT>