imageUrlToBase64(imageUrl) {
? let image = new Image() // 一定要設(shè)置為let，不然圖片不顯示
? image.setAttribute('crossOrigin', 'anonymous') // 解決跨域問題
? image.src = imageUrl +"&v=" + Math.random()
? image.onload = () => {
? ? var canvas = document.createElement("canvas")
?? ?canvas.width = image.width
?? ?canvas.height = image.height
?? ?var context = canvas.getContext('2d')
?? ?context.drawImage(image, 0, 0, image.width, image.height)
?? ?var quality = 0.8
?? ?var dataURL = canvas.toDataURL("image/jpeg", quality) // 使用toDataUrl將圖片轉(zhuǎn)換成jpeg的格式,不要把圖片壓縮成png，因為壓縮成png后base64的字符串可能比不轉(zhuǎn)換前的長！
? ? this.base64toFile(dataURL)
? }
}

Base64轉(zhuǎn)換為二進制文件流(binary)

base64toFile (dataurl, filename = 'file') {
? let arr = dataurl.split(',')
? let mime = arr[0].match(/:(.*?);/)[1]
? let suffix = mime.split('/')[1]
? let bstr = atob(arr[1])
? let n = bstr.length
? let u8arr = new Uint8Array(n)
? while (n--) {
? ? u8arr[n] = bstr.charCodeAt(n)
? }
? let file = new File([u8arr], `${filename}.${suffix}`, {
? ? type: mime
? })
? console.log(file)
}

下載二進制流文件

平時在前端下載文件有兩種方式，一種是后臺提供一個 URL，然后用 window.open(URL) 下載；另一種是后臺直接返回文件的二進制內(nèi)容，然后前端轉(zhuǎn)化再下載，下面主要說的是第二種實現(xiàn)方式

Blob、ajax(axios)

mdn 上是這樣介紹 Blob 的：

Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)

具體使用

axios({
? method: 'post',
? url: '/export',
})
.then(res => {
? // 假設(shè) data 是返回來的二進制數(shù)據(jù)
? const data = res.data
? const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
? const a = document.createElement('a')
? a.href = url
? a.click()
? // const link = document.createElement('a')
? // link.style.display = 'none'
? // link.href = url
? // link.setAttribute('download', 'excel.xlsx')
? // document.body.appendChild(link)
? // link.click()
? // document.body.removeChild(link)
})

打開下載的文件，一堆亂碼…一定有哪里不對。

最后發(fā)現(xiàn)是參數(shù) responseType 的問題，responseType 它表示服務(wù)器響應的數(shù)據(jù)類型，由于后臺返回來的是二進制數(shù)據(jù)，所以我們要把它設(shè)為 arraybuffer，接下來再看看結(jié)果是否正確。

axios({
? method: 'post',
? url: '/export',
? responseType: 'arraybuffer',
})
.then(res => {
? // 假設(shè) data 是返回來的二進制數(shù)據(jù)
? const data = res.data
? const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
? const a = document.createElement('a')
? a.href = url
? a.click()
? // const link = document.createElement('a')
? // link.style.display = 'none'
? // link.href = url
? // link.setAttribute('download', 'excel.xlsx')
? // document.body.appendChild(link)
? // link.click()
? // document.body.removeChild(link)
})

這次沒有問題，文件能正常打開，內(nèi)容也是正常的，不再是亂碼。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: