文件下载方式

42 阅读1分钟

当接口返回值是二进制数据时:

通过接受返回的blob类型,自动生成blob对象并将返回的blob数值进行转换成可供下载类型,在生成时blob对象是可通过参数确定MIMEtype类型 如果不声明,浏览器将自动推断MIMEtype类型,当blob生成之后 通过创建一个专门下载的a标签并复制href为blob数据后 在进行模拟a点击事件调用浏览器的下载机制,下载后进行删除a标签和创建的blob对象

打印的接口返回的数据结构: image.png

    const blob = new Blob([response.data], { type: 'image/jpeg' })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'image.jpg'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)

直接通过拼接IP端口 + 接口地址的方式下载

直接使用window.lacation.href的方式将我们服务器的IP端口拼接上接口地址和请求参数 通过新创建浏览器页面并赋值地址的方式调用浏览器的默认下载方式

       'import.meta.env.VITE_APP_BASE_URL:IP端口'
        window.location.href =
        import.meta.env.VITE_APP_BASE_URL +
        fileStore.getFileDownloadUrl(obj.fileId);

fileStore.js:

   'url:是微服务前缀'
    return `/api${url}/downloadFile?fileId=${fileId}`;