在浏览器中下载文件

Question

On my web page I have links for downloading mp3 files.

Upon user click, I make an ajax call and create an mp3 file on the server.

I return the path of the file to the script but now, how do I make it download the user system?

<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>

I get the url of the mp3 file in alert but how to download it ?

Thank you.

Answer 1

Create an anchortag in your HTML which is hidden using CSS

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

And in your 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

You can do window.location = return_data['url']; assuming that you have an url which starts with http... This approach is equivalent of the user clicking the link to the mp3. Another approach would be to create an iframe with src set to the newly created link. Using this method the user's browser will prompt to download the file without having to change the location (navigating away from the current page). I recommend the first approach.

Answer 3

This should 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) {
                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>