The front end requests to receive the display flow file

The following is the request through axios

Other things do not need to be modified, but the corresponding package needs to be set to blob

export function getBlob(){
    return axios({
        url: '/flow/123',
        method: 'post',
        data,
        responseType: 'blob'
    })
}

After the return parameter is read (onloadend), convert the content of the file (fileReader.result), and judge the file type by whether there is an exception

If it is not a file stream, you can give prompts and other operations in try

If it is a file stream, you can perform downloading and other operations in the catch

let data = {
    test: 1
}
getBlob(data).then(res => {
    const fileReader = new FileReader()
    fileReader.onloadend = () => {
        try{
            const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据,转换失败
        }catch(err){ // 解析对象失败,说明是正常的文件流
            // 下载文件
            const blob = new Blob([res], {
                type: res.type
            })
            const picSrc = window.URL.createObjectURL(blob)
            window.open(picSrc)
        }
    }
})

Note: It must be set to responseType: 'blob' in the corresponding category  . If it is set to  responseType: 'arraybuffer' , use new FileReader() after the request returns to process  and determine whether the backend returns a file stream. will report an error

Guess you like

Origin blog.csdn.net/m0_46114541/article/details/129163468