The front end uses blob to process the binary data stream returned by the back end, and exports the file

The export function is mainly operated in the response, and the front is the normal interface

Configure it when adjusting the interface (the place of url)

responseType: 'blob', // This attribute is very important, otherwise the data will be garbled

headers: { 'Content-Type': 'application/json;charset=UTF-8' }

Ok, if the interface call is successful, then you can process the response

    let blob = new Blob([response.data], {
        type: 'application/vnd.ms-excel' // 传入excel的MIME类型
    })
    let url = window.URL.createObjectURL(blob) // 创建下载链接
    let el = document.createElement('a') // 转化完成,创建一个a标签用于下载
    const fileName = 'content-disposition'// 获取文件的下载名
    var index = response.headers[fileName].lastIndexOf('=')
    el.download = decodeURIComponent(
        response.headers[fileName].substring(index + 1)
    )
    el.href = url
    document.body.appendChild(el)
    el.click()
    document.body.removeChild(el) //  移除下载元素
    window.URL.revokeObjectURL(url) //释放掉blod对象

successfully downloaded

Guess you like

Origin blog.csdn.net/qq_44782585/article/details/121648572