php前后端分离下载文件,Laravel前后端分离文件下载

由于采用前后端完全分离架构，后端采用Laravel，前端采用react，交互通过axios库使用ajax进行，这样就导致无法get请求下载文件。

文件下载通常分为两类：

* 一类是真是存在于服务器上面的文件

* 一类是后端动态生成的字节流文件

为了解决这两者的下载问题我自定义了助手方法来配合axios实现文件下载。

/**

* js 文件下载

*

* DownloadHelper.js

* import downloadHelper from './DownloadHelper';

*/

/**

* http文件下载

*

* use：

* downloadHelper.downloadUrl(response.data);

*

* @param url

*/

const downloadUrl = url => {

let iframe = document.createElement('iframe');

iframe.style.display = 'none';

iframe.src = url;

iframe.onload = function () {

document.body.removeChild(iframe)

};

document.body.appendChild(iframe)

};

/**

* 获取字节流文件

*

* use：

* var blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});

* var fileName = '文件名称.csv';

* downloadHelper.downFile(blob, fileName);

*

* @param blob

* @param fileName

*/

function downFile(blob, fileName) {

if (window.navigator.msSaveOrOpenBlob) {

navigator.msSaveBlob(blob, fileName);

} else {

var link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);

link.download = fileName;

link.click();

window.URL.revokeObjectURL(link.href);

}

}

export default {

downloadUrl: downloadUrl,

downFile: downFile

};

使用：

import axios from 'axios';

import downloadHelper from './DownloadHelper';

/*----------------------字节流文件下载-------------------------*/

/**

* 获得文件数据并下载

*/

axios.get('http://crm.dev/api/v1/clients/exportExcel', {

responseType: 'arraybuffer',

headers: {

'Accept': 'application/json',

'Authorization': AUTH_TOKEN

}

}).then(response => {

var blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});

var fileName = '文件名称.csv';

downloadHelper.downFile(blob, fileName);

});

/*-----------------------普通文件下载-------------------------*/

/**

* 获取文件路径

*/

axios.get('http://crm.dev/api/v1/clients/excelTemplate', {

headers: {

'Accept': 'application/json',

'Authorization': AUTH_TOKEN

}

}).then(response => {

downloadHelper.downloadUrl(response.data);

});