前端通过 Blob / a标签 / iframe的src属性 实现文件下载 |
您所在的位置：网站首页 › a标签href下载文件 › 前端通过 Blob / a标签 / iframe的src属性 实现文件下载 |
前端通过 Blob / a标签 / iframe的src属性 实现文件下载
|
1. 通过Blob下载
参考链接: 前端通过Blob实现文件下载 参考链接2 HTML5 File API 全介绍
下载按钮 调用的Blob下载方法 // 下面的downResult是前端通过Blob实现文件下载,需要请求后台获取数据responseData, 但大文件的等待时间较长,现改为直接通过src下载 downResult () { this.taskId = window.location.href.split('/').pop() this.taskLoading = true let id = parseInt(this.taskId) taskApi.downResult(id).then(responseData => { this.taskLoading = false this.$Message.success('运行结果获取成功，下载即将开始，请稍后……') let blob = new Blob([responseData], {type: 'application/zip'}) let url = window.URL.createObjectURL(blob) console.log(url) this.download(url, '-result') window.URL.revokeObjectURL(url) }) }, download (url, text) { if (!url) { return } let link = document.createElement('a') // 创建a标签 link.style.display = 'none' link.href = url let name = 'task-' + this.taskId + text link.setAttribute('download', name) document.body.appendChild(link) link.click() document.body.removeChild(link) },其中, taskApi是统一写的请求接口, 统一写好请求方法与请求头. import http from './http' const taskApi = { downResult (jobId) { return http.get('/api/job/downResult?jobId=' + (jobId || ''), {responseType: 'blob'}) }, pictureDownload (jobId) { return http.get('/api/job/jobPicture?jobId=' + (jobId || ''), {responseType: 'arraybuffer'}) }, gpuInfo () { return http.get('/api/job/gpuInfo') }, gpuStatus (number, gpuList) { return http.get('/api/job/gpuStatus?number=' + (number || '') + '&gpuList=' + (gpuList || '')) } } export default taskApi其中引用的http.js是封装的axios请求, 设置了请求拦截和响应拦截以及错误码提示信息. import axios from 'axios' import ViewUI from 'view-design' // 通用错误码提示信息 function responseError (error, msg) { switch (error) { case 404: ViewUI.Message.error({ content: '404 Not Found', duration: 6 }) // gotoUrl('404.html') break case 500: ViewUI.Message.error({ content: '服务器错误(500)', duration: 6 }) // gotoUrl('500.html') break case 401: ViewUI.Message.error({ content: '请先登录', duration: 6 }) gotoUrl('login.html') break case 403: ViewUI.Message.error({ content: '没有权限', duration: 6 }) gotoUrl('403.html') break default: ViewUI.Notice.error({ title: 'Error', desc: msg, duration: 6 }) } } function gotoUrl (goLink) { // 跳转到错误码页面,jobs页面详情页(jobs/jobId), AI工作台打开图页design/graphId点击到其他页面时,页面替换(截取url中jobs/和design/的前半部分),跳转到错误码页面 let url = window.location.href // 当前页面的url地址 http://localhost:8081/design/125 let arrUrlHttp = url.split('//') // ["http:", "localhost:8081/design/125"] let arrUrl = arrUrlHttp[arrUrlHttp.length - 1].split('/') // ["localhost:8081", "design", "125"] switch (arrUrl[1]) { case 'jobs': let link1 = url.split('jobs')[0] location.href = link1 + goLink break case 'design': let link2 = url.split('design')[0] location.href = link2 + goLink break default: location.href = goLink } } // 请求拦截 axios.interceptors.request.use((config) => { ViewUI.LoadingBar.start() // 自动模拟进度条 return config }, function (error) { ViewUI.Notice.error({ title: 'Error', desc: 'Something wrong when requesting data!' }) ViewUI.LoadingBar.error() // 补全失败进度 return Promise.reject(error) }) // 响应拦截 axios.interceptors.response.use((config) => { ViewUI.LoadingBar.finish() // 补全成功进度 // 后台自定义错误码提示信息,后台返回{code:xxx,msg:xxx},前端展示msg if (config.data.code && config.data.code !== 200) { // 非200状态码则均为后台自定义的错误码 responseError(config.data.code, config.data.msg) return Promise.reject(config) } return config.data }, function (error) { console.log('error=', error) ViewUI.LoadingBar.error() // 补全失败进度 if (error && error.response) { responseError(error.response.status) } return Promise.reject(error) }) axios.defaults.headers['Content-Type'] = 'application/json' export default axios
现改为通过iframe 的 src 属性, 直接请求下载地址, 浏览器自动下载 或者a标签下载 |
但文件很大时, Blob请求十分缓慢, 需要等到全部请求获取到以后才开始转换以及下载, 十分缓慢, 等待过程较长. 
【本文地址】
今日新闻 |
推荐新闻 |