這是一個(gè)非常常見的業(yè)務(wù)常見哈踱，話不多說直接擼；氖省！开镣！
封裝寫一個(gè)請(qǐng)求后端接口的方法刀诬，具體可根據(jù)項(xiàng)目視情況而變---你的組件方法
//這里非常有必要說明一下，必須加上responseType邪财，因?yàn)橄螺d的zip屬于流和普通的下載方式還是有較大區(qū)別的陕壹，同時(shí)headers也需要設(shè)置一下，不然是下載不了树埠。
export function Export(data) {
return request({
url: '',
method: '',
responseType: 'blob',
headers:{ 'Content-Type': 'application/json; application/octet-stream'},
data: data
})
}
你的界面
<!--第一步 --!>
<sapn @click='handleExport'>下載zip壓縮包</span>
<!--第二步 --!>
import { getApplyInfoExport } from ''
<!--第三步 --!>
handleExport() {
let data = ''
this.$confirm("是否確認(rèn)導(dǎo)出所有數(shù)據(jù)?", "警告", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning",
}).then(function() {
return getApplyInfoExport(data);
}).then(response => {
let blob = new Blob([response.data], {type: 'application/zip'})
let url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 創(chuàng)建a標(biāo)簽
link.href = url
link.download = '' // 重命名文件
link.click()
URL.revokeObjectURL(url) // 釋放內(nèi)存
}).catch(function(err) {
console.log(err)
});
},
