<code> <el-button type="primary" icon="Download" plain @click="handleDownload('batch')">下载</el-button>code>

1、a标签下载（没有进度条，接口走完前端才有反应，下载大文件时用户体验不好，适用下载小文件）

// 下载

const handleDownload = async row => { -- -->

if (selectedData.value && selectedData.value.length != 0) {

selectedData.value.forEach(item=>{

downloadFileAuthentication(item.propertyId).then(res => {

downloadFileHref(item.propertyId).then(res => {

const blob = new Blob([res], { type: 'application/zip' })

const link = document.createElement('a')//创建a标签

link.download = item.propertyName//a标签添加属性

link.style.display = 'none'

link.href = URL.createObjectURL(blob)

document.body.appendChild(link)

link.click()//执行下载

URL.revokeObjectURL(link.href) //释放url

document.body.removeChild(link)//释放标签

})

})

})

} else {

ElMessage.warning('请先选择操作数据');

}

}

2、 window.location.href下载（有进度条，可取消、暂停。缺点：一次只能下载一条，不支持批量下载）（这里后端get请求方式传参）

const handleDownload = async row => {

const url = `/ca/download/downloadFile?propertyId=${ row.propertyId}`;

downloadFileAuthentication(row.propertyId).then(res => {

if (res.code == 200) {

window.location.href = ` ${ downLoadUrl + url}&token=${ getToken()}`

}

})

};

3、iframe下载（有进度条，可取消、暂停，支持同时下载多个）

const handleDownload = async row => {

if (selectedData.value && selectedData.value.length != 0) {

selectedData.value.forEach(item=>{

downloadFileAuthentication(item.propertyId).then(res => {

downloadFileHref(item.propertyId).then(res => {

var url = `/ca/download/downloadFile?propertyId=${ item.propertyId}`; // 文件地址

var iframe = document.createElement('iframe')

iframe.src = ` ${ downLoadUrl + url}&token=${ getToken()}`

iframe.style.display = 'none'

iframe.onload = function () {

document.body.removeAttribute(iframe)

}

document.body.appendChild(iframe)

})

})

})

} else {

ElMessage.warning('请先选择操作数据');

}

}