前端处理后台接口返回文件流方法记录

最新推荐文章于 2024-08-25 23:35:37 发布

一只会写代码的

最新推荐文章于 2024-08-25 23:35:37 发布

阅读量5.4k

点赞数

分类专栏：前端 react vue 文章标签： javascript vue.js html5 react

本文链接：https://blog.csdn.net/weiyong_94/article/details/111032474

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

问题一

在我们的项目中，登录的时候有一个图形验证码功能，这个图形实际为一张后台返回的图片，通过get请求接口获取图片流。

问题一实现方法

将接口返回的数据设置成返回blob类型：responseType:‘blob’

axios({
    method:'get',
    url: url[urlStr],
    responseType:'blob'
}).then(response => {
    resolve(response)
}).catch(error => {
    reject(error)
})

将获取到的blob对象，生成base64

let a = new FileReader();
a.onload = function (e) {
    //e.target.result 就是图片的base64码
    // e.target.result
}
a.readAsDataURL(res);

问题二

前端通过接口请求，后台返回excel文档流，并下载到本地。

问题二实现方法

接口请求应答设置： responseType: ‘arraybuffer’

axios.post(url[urlStr], formData, { responseType: 'arraybuffer' })
.then(response => {
    resolve(response)
}).catch(error => {
    reject(error)
})

将获取到的文档流创建成blob对象，对象类型为’application/vnd.ms-excel’, 并通过a标签实现下载功能

axiosUpload(parmas, ajaxUrl).then((res) => {
    //res 为文档流
    if (res) {
        let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' })) //处理文档流
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.download = fileName
        document.body.appendChild(link)
        link.click()
    } else {
        message.error('暂无数据，无法导出！')
    }
})