炫酷的移动端网站,东莞公司网站怎么做,深圳做软件开发的公司,淘宝客网站建站源码前言
由于跨域#xff0c;所以无法直接通过window.location.href或者a标签直接下载#xff0c;直接拼后台接口地址又暴露了后台地址#xff0c;不可行。 所以在这种跨域情况下#xff0c;本章讲一下vue如何下载后台接口提供的application/octet-stream文件流Excel文件。
…前言
由于跨域所以无法直接通过window.location.href或者a标签直接下载直接拼后台接口地址又暴露了后台地址不可行。 所以在这种跨域情况下本章讲一下vue如何下载后台接口提供的application/octet-stream文件流Excel文件。
功能
实现前端vue下载后台返回的application/octet-stream文件流 1、使用blob类型请求 2、获取到数据后处理成Blob数据 3、通过创建一个a标签将Blob数据转换成base64数据放到a标签的url中 4、触发a标签点击事件实现下载Blob数据 5、删除a标签
代码实现
/*** 导出excel* param fileName* returns {AxiosPromise}*/
export function exportExcel(fileName){request({url: /xxx/getCameraXls?fileNamefileName,method: get,responseType:blob}).then(res{const date new Date(new Date() 8 * 3600 * 1000).toISOString().replace(/T/g, ).replace(/\.[\d]{3}Z/, ).replace(/\-/g, ).replace(/\:/g, ).replace(/\s*/g, )const downloadName fileName - date .xlsxdownloadFunc(downloadName,res)})
}function downloadFunc(fileName,data){const blob new Blob([data], { type: application/vnd.ms-excel;charsetutf-8 })const downloadElement document.createElement(a)const href window.URL.createObjectURL(blob)downloadElement.href hrefdownloadElement.download fileNamedocument.body.appendChild(downloadElement)downloadElement.click()document.body.removeChild(downloadElement)window.URL.revokeObjectURL(href)
}
