vue 转换信息为二进制 并实现下载

项目后端为springboot，前端为vue

后端在mysql数据库直接存储要下载的信息，mediumtext类型。

需求：前端列表明细行有下载按钮，点击按钮时，通过Post请求拿到下载信息，并下载。

download({ id: row.id }).then(response => {
    const blob = new Blob([response.data])
    const link = document.createElement('a')
    if ('download' in link) {
        link.download = row.fileName
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
    } else {
        navigator.msSaveBlob(blob, row.fileName)
    }
}).catch(() => {})

代码是从网上查的，可以用。

说白了就是接收后端传的信息（这里是字符串），先转换成blob二进制。

创建一个a标签，设置其href属性为blob，设置download为下载后的文件名，点击，再移除。

后端就是从数据库查询，返回要下载的信息，这里返回的是字符串。