前端下载文件以及成功后执行回调的方法

前端下载文件以及成功后执行回调的方法

前端完成下载

//a标签或者window.location.href = ""实现下载
downloadTable(info) {
      window.location.href =url
}
downloadAnnex(annex) {
      window.open(annex.url);
      // window.location.href=annex.url
},

下载完成时，执行操作

// 监听下载完成回调
      let net = window.open(url);
      net.addEventListener("beforeunload", e => {
        console.log(11111, e);
      });

 另外，上述是get方式下载文件，post方式下载文件如下

post请求，后端返回文件流

this.axios.post('xxxurl', {params}).then(res => {
                if (!res.data.hasError) {
                    const content = res
                    const blob = new Blob([content])
                    const fileName = 'xxx.xls'
                    if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 移除url对象
                        document.body.removeChild(elink)
                    } else {
                        navigator.msSaveBlob(blob, fileName)
                    }
                } else {
                    this.$message.error(res.data.errorMsg);
                }
            }).catch((error) => {
                if (error.response) {
                    this.$message.error(error.response.data);
                }
            });