美文网首页
axios导出文件时二进制流处理

axios导出文件时二进制流处理

作者: 男人宫 | 来源:发表于2024-12-30 13:20 被阅读0次
  • 有两种情况
  • 1.报错,返回的是一个json对象,但因为我们是以流形式请求的,所以会返回json的二进制流
  • 2.正确,返回正确的文件流
 if (Reflect.has(response.headers, 'content-disposition')) {
 //如果是二进制流,获取二进制流文件
        
 DownloadBlob(response, resolve)
       
} else {
 //如果没有导出任何东西,后台返回json,强转json,并给用户提示报错
   
  BlobToJson(response.data, resolve)
  
  }

文件流处理

function DownloadBlob({ headers, data }, resolve) {
    let downloadName
    if (headers['content-disposition'] && headers['content-disposition'].includes('attachment;filename=')) {
        downloadName = headers['content-disposition'].split('attachment;filename=')[1]
    }
    const type = headers['content-type']
    const blob = new Blob([data], { type })
    let dowloadUrl = window.URL.createObjectURL(blob)
    if (downloadName) {
        resolve({
            url: dowloadUrl,
            name: decodeURI(downloadName)
        });
    } else {
        resolve({
            url: dowloadUrl,
        });
    }
}

json处理

function BlobToJson(data, resolve) {
    let r = new FileReader()
    r.onload = function() {
        try {
            let resData = JSON.parse(this.result)
            if (resData) {
                // console.log("文件错误信息", resData);
                Vue.prototype.$message({
                    showClose: true,
                    message: resData.msg,
                    type: 'error'
                });
                resolve({
                    message: resData.message,
                    status: resData.status
                });
            }
        } catch (err) {
            // console.log("文件错误", err);
            Vue.prototype.$message({
                showClose: true,
                message: err,
                type: 'error'
            });
            resolve({
                message: err,
                status: 10030
            });
        }
    }
    r.readAsText(data)
}

相关文章

  • 项目部分功能实现

    1、导出excile,但是后台返回时二进制数据流,在前台要进行处理。 axios({ method: 'GE...

  • axios请求流文件处理方法

    axios请求流文件处理方法 核心方法:objectURL= URL.createObjectURL(object...

  • 前端导出xlsx二进制文件流

    背景: vue项目、需要点击导出、向后台发起请求、查询到对该用户的数据、返回二进制文件流、导出为xlsx文件。1、...

  • 第8章 Node.js Buffer(缓冲区)

    avaScript 语言自身只有字符串数据类型,没有二进制数据类型。但在处理像TCP流或文件流时,必须使用到二进制...

  • 流文件导出直接下载

    文件的异步导出,此处是采用post的方法导出excel 调用接口获取流文件之后获取数据,进行下载处理 文件下载ok

  • nodejs中Buffer的创建和转换

    buffer是用来做什么?主要是用来处理二进制文件流和TCP流的文件缓存区。我们可以将二进制流和string,js...

  • js实现二进制流文件下载

    导语 本篇文章介绍vue如何实现后台接口返回二进制流实现文件下载注意axios的responseType: 'bl...

  • 关于 Node.js 之 Buffer

    JavaScript 语言自身只有字符串数据类型,没有二进制数据类型。 但在处理像 TCP 流或文件流时,必须使用...

  • axios获取文件流导出excel表格

    一、导出excel表格实现的具体思路: 1.创建一个a标签;2.获取响应头content-disposition作...

  • 四:处理二进制的Buffer类

    定义:JavaScript 语言自身只有字符串数据类型,没有二进制数据类型。但在处理像TCP流或文件流时,必须使用...

网友评论

      本文标题:axios导出文件时二进制流处理

      本文链接:https://www.haomeiwen.com/subject/vtaaejtx.html