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

Question

I want to download a file from the server using javascript/jquery.

When press the button the server response with an url file that i want to download.

the button:

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

the ajax request:

$('#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;
                }
            }
       });
})

I am using laravel 5.7 blade to generate the url.

When i click the button the file will open instead of download (because of the window.location=resp.url;

I was thinking... after the ajax call is made (when success response).... setting the download attribute and href to the link.... but then i need to call again the click event to download the file.

How can i download the file istead of opening???

Answer 1

window.location.href = resp.url

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

Answer 2

creating a hidden form for download the file works:

The hidden form:

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

After receiving from ajax request (on success) => submit the form to download the file:

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

On the backend the response for the ajax request is:

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

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

The download function that is call on form submit:

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

If anyone have any better idea, please tell me :)