從後端介面下載檔案的2種方式:get方式、post方式
阿新 • • 發佈:2020-12-26
從後端介面下載檔案的2種方式
一、get方式
直接使用:location.href='http://www.xxx.com/getFile?params1=xxx¶ms2=xxxx'
二、post方式
當有檔案需要傳給後端介面、後端處理後返回檔案時,用post方式傳送formdata。
此時下載後端返回的檔案,流程:
1、後端設定Response Headers的2個值:
Content-Disposition:attachment;filename=xxx.xls
Content-Type:application/octet-stream
2、前端處理下blob檔案:
以vue、vue-resource程式碼為例:
Vue.http.post('/xxx/exportDetailData', formData, {responseType: 'blob'})
.then(response => {
return response.blob()
})
.then(blob => {
let url = window.URL.createObjectURL(blob)
let link = document.createElement('a')
link.download = '詳情資料.xls'
link.style.display = 'none'
link.href = url
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href)
document.body.removeChild(link)
})
.catch(error => {
console.log(error)
})