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的链接。另一种方法是创建一个iframe，其中src设置为新创建的链接。使用此方法，用户的浏览器将提示下载文件，而无需更改位置（导航离开当前页面）。我推荐第一种方法。

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>

在浏览器中下载文件

4 个答案: