在瀏覽器中下載文件

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>