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

});

以上就是“laravel 前后端分离文件下载”的详细内容，想要获取更多laravel教程欢迎关注编程学习网