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為下載后的文件名，點擊，再移除。

后端就是從數據庫查詢，返回要下載的信息，這里返回的是字符串。