使用 javascript 下载 url 文件而不是打开文件答案

【问题标题】：download a url file with javascript istead of opening the file使用 javascript 下载 url 文件而不是打开文件
【发布时间】：2018-10-16 09:31:18
【问题描述】：

我想使用 javascript/jquery 从服务器下载文件。

当按下按钮时，服务器会响应我要下载的 url 文件。

按钮：

<a class="btn btn-primary" id="exportInvoice">Export XML</a>

ajax 请求：

$('#exportInvoice').on('click', function () {                
     $.ajax({
           type: 'POST',
           dataType: 'json',
           url: '{{ route('export-xml') }}',
           data: {dateRange: dateRange},
           success: function (resp) {                        
                if(resp.error){
                    // error
                    alert(resp.msg);
                } else {
                    // success
                    alert(resp.msg);
                    window.location=resp.url;
                }
            }
       });
})

我正在使用 laravel 5.7 Blade 生成 url。

当我单击按钮时，文件将打开而不是下载（因为 window.location=resp.url;

我在想...在进行 ajax 调用之后（当成功响应时）...将下载属性和 href 设置为链接...但是我需要再次调用 click 事件来下载文件。

我怎样才能下载文件而不是打开？？？

【问题讨论】：

AJAX 是一个 background 请求，您不能从那里直接触发下载对话框。有一些解决方法，但在这种情况下，不使用 AJAX 可能更有意义。如果您需要向服务器提交 POST 数据以使其生成此下载资源，则可以通过使用 JS 提交隐藏表单来实现。
感谢@misorude 获取信息；）（使用隐藏表单）

标签： javascript jquery

【解决方案1】：

window.location.href = resp.url

这将在同一页面开始下载，就像您单击除_self 之外没有任何目标的链接时一样。

【讨论】：

我已经试过了...同样的效果（会打开文件）
要强制下载文件，请确保发送正确的标题： Content-Disposition: attachment;文件名="mypdf.pdf";这将确保文件不会显示在浏览器中而不是被下载。在另存为对话框中将文件名部分替换为您想要的默认文件名。

【解决方案2】：

创建一个用于下载文件的隐藏表单：

隐藏的表格：

<form id="downloadXmlForm" method="post" action="{{ route('download-xml-invoices') }}" style="display: none">
     <input type="hidden" name="xmlFileName">
     <button type="submit" class="btn btn-primary">Export XML</button>
     ({ csrf_field() }}
</form>

收到来自 ajax 的请求后（成功）=> 提交表单以下载文件：

$('input[name="xmlFileName"]').val(resp.fileName);                                
document.getElementById('downloadXmlForm').submit();

在后端，ajax 请求的响应是：

...
$fileName = uniqid().'.xml';
$xmlFilePath = storage_path('invoices/'.$fileName);
file_put_contents($xmlFilePath, $xmlString);

return response()->json(['error' => false, 'msg' => $message, 'fileName' => $fileName]);

表单提交时调用的下载函数：

public function downloadInvoicesXml(Request $request){
    return response()->download( storage_path('invoices/'.$request->input('xmlFileName')));
}

如果有人有更好的想法，请告诉我:)

【讨论】：