在浏览器中下载文件答案

【问题标题】：Download a file in the browser在浏览器中下载文件
【发布时间】：2014-10-27 19:25:24
【问题描述】：

在我的网页上，我有下载 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 文件的 url，但如何下载呢？

谢谢。

【问题讨论】：

标签： javascript jquery django

【解决方案1】：

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>

【讨论】：

【解决方案2】：

在您的 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>

【讨论】：

使用您的解决方案，浏览器会尝试播放 mp3 文件。我想要它下载。谢谢。
@Stark 很好，谢谢，只是想帮助你。坚持下去，伙计。

【解决方案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>

【讨论】：

使用您的解决方案，浏览器会尝试播放 mp3 文件。我想要它下载。谢谢。
好的，所以你需要阅读这个 SO 答案stackoverflow.com/a/10150310/2519700

【解决方案4】：

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

【讨论】：

当我执行window.location = return_data['url']; 时，浏览器会尝试自行播放文件。 Mp3 文件有时会以浏览器拒绝播放的方式损坏，但如果下载它可以在本地媒体播放器中正常播放。