js-利用创建a便签实现下载文件功能
背景:
工作中经常会有点击按钮,下载或者导出文件的功能,用到的地方较多,把这个下载方法封装起来,方便调用。
封装代码:
export default function downloadBlob(data, fileName="file") {let blob = new Blob([data]);if(navigator.userAgent.indexOf("Edge") > -1) {window.navigator.msSaveOrOpenBlob(blob, fileName);}let url = window.URL.createObjectURL(blob);// 生成一个a标签let link = document.createElement("a");link.style.display = "none";link.href = url;// 生成时间戳link.download = decodeURI(fileName);document.body.appendChild(link);link.click();document.body.removeChild(link); // 下载完成移除元素window.URL.revokeObjectURL(url); // 释放掉blob对象
}
调用:
handleExport(row) {this.loading = truethis.$axios.post('/xxx/export', {id: row.id}, //视情况传参{responseType: "blob",}).then(response => {this.loading = falseif(response.data) {let fileName = `${row.nick}_${row.reportName}_`+ dayjs().format('YYYY-MM-DD HH:mm') + '.xlsx';//调用downloadBlob(response.data, fileName)}})
}