惠通网站建设,关于公司门户网站建设的议案,专业网站设计定制,百竞网站建设文章目录 通过链接下载a标签下载方法注意 获取文件流请求体配置下载文件流 总结 通过链接下载
a标签
对于已知地址的目标文件#xff0c;前端可以使用 a标签 来直接下载#xff0c;使用a标签下载使用到两个属性
download#xff1a;下载文件名href#xff1a;目标文件下… 文章目录 通过链接下载a标签下载方法注意 获取文件流请求体配置下载文件流 总结 通过链接下载
a标签
对于已知地址的目标文件前端可以使用 a标签 来直接下载使用a标签下载使用到两个属性
download下载文件名href目标文件下载链接
a hrefxxx/xxx/a.xlsx downloada.xlsx点击下载图片/a下载方法
使用时给触发的div绑定事件 const download async () {const url https://xx.com/xx/xx/a.xlsxconst fileName a.xlslet a document.createElement(a);a.download fileName;a.href url;document.body.append(a); // 修复firefox中无法触发clicka.click();URL.revokeObjectURL(a.href);a.remove();}注意
a标签的下载只能使用get请求且无法在请求体中添加header信息
获取文件流
请求体配置
axios({url: https://xxx.com/xxx/xxx,method: get,responseType: blob,}).请求方法可用post或者getresponseType一般需要设置为 blob 或者 arraybuffer 下载文件流
封装下载函数
export const downloadFileByBlob (fileData, fileName, ext xlsx) {const blob new Blob([fileData], {type: docMimeTypes[ext],});console.log(fileData---,fileData)console.log(blob---,blob)const objectUrl window.URL.createObjectURL(blob);const link document.createElement(a);link.href objectUrl;link.setAttribute(download, fileName);document.body.appendChild(link);link.click();link.remove();window.URL.revokeObjectURL(objectUrl); // 文件下载后释放blob对象
};下载函数使用 const res await downLoadFile(param)console.log(downLoadFile--, res)downloadFileByBlob(res.data, 下载文件) // 数据流是个Blob对象打印如下 总结
JavaScript下载文件 通过链接下载 获取文件流
