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

项目后端为springboot,前端为vue

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

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

 1 download({ id: row.id }).then(response => {
 2     const blob = new Blob([response.data])
 3     const link = document.createElement('a')
 4     if ('download' in link) {
 5         link.download = row.fileName
 6         link.style.display = 'none'
 7         link.href = URL.createObjectURL(blob)
 8         document.body.appendChild(link)
 9         link.click()
10         URL.revokeObjectURL(link.href)
11         document.body.removeChild(link)
12     } else {
13         navigator.msSaveBlob(blob, row.fileName)
14     }
15 }).catch(() => {})

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

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

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

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

posted @ 2020-05-25 13:58  SamNicole1809  阅读(128)  评论(0编辑  收藏