問題描述：項(xiàng)目中使用的是vue框架進(jìn)行開發(fā)，因?yàn)槲募螺d存在權(quán)限問題，所以并不能通過 a 鏈接的 href 屬性直接賦值 URL進(jìn)行下載，

（如果你的文件沒有下載權(quán)限，可以直接通過href屬性賦值URL的方法進(jìn)行文件下載），所以使用vue-resource請(qǐng)求文件流后，借助Blob對(duì)象實(shí)現(xiàn)下載，

但是仍然存在解壓的問題（針對(duì)壓縮文件），而 docx等文檔格式主要出現(xiàn)的就是亂碼問題。

問題截圖：

出現(xiàn)以上解壓問題的代碼，通過vue-resource請(qǐng)求二進(jìn)制文件

downloadFile(attachment) {let fileName = attachment.displayName;this.$http.get(strategyDownloadUrl + '/' + attachment.id).then((res) => {if(typeof(res.data) == 'string'){var blob = new Blob([res.data], {type:'application/octet-stream'})if (window.navigator.msSaveOrOpenBlob) {//msSaveOrOpenBlob方法返回bool值navigator.msSaveBlob(blob, fileName);//本地保存} else {var link = document.createElement('a');//a標(biāo)簽下載link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();window.URL.revokeObjectURL(link.href);}}else{swal(res.data.msg,'','info')//個(gè)人彈窗忽視}})},

采用原生對(duì)象XHRHttpRequest進(jìn)行文件請(qǐng)求（也可通過jquery的ajax進(jìn)行文件請(qǐng)求），可以正常解壓文

downloadFile(attachment) {
let that = this
var ajax = new XMLHttpRequest()
ajax.responseType = 'blob'
ajax.open("GET",strategyDownloadUrl + '/' + attachment.id,true)
ajax.setRequestHeader('X-Authorization','Bearer ' + this.$store.state.token)
ajax.onreadystatechange = function(){
if(this.readyState == 4) {
if(this.status == 200) {
//console.log(this.response) // should be a blob
if(this.response.type == "application/octet-stream"){
that.downloadHandler(this.response,attachment.displayName)
}else{
swal('您要下載的資源已被刪除！','' , 'error')
}
} else if(this.responseText != "") {
//console.log(this.responseText);
}
} else if(this.readyState == 2) {
if(this.status == 200) {
this.responseType = "blob"
} else {
this.responseType = "text"
}
}
};
ajax.send(null);
},
downloadHandler(content, filename) {
var eleLink = document.createElement('a')
eleLink.download = filename
eleLink.style.display = 'none'
// 字符內(nèi)容轉(zhuǎn)變成blob地址
var blob = new Blob([content],{type: "application/octet-stream"})
eleLink.href = URL.createObjectURL(blob)
// 觸發(fā)點(diǎn)擊
document.body.appendChild(eleLink)
eleLink.click()
// 然后移除
document.body.removeChild(eleLink)
},

如有不正確的地方，請(qǐng)指正交流，共同進(jìn)步。

轉(zhuǎn)載于:https://www.cnblogs.com/note-blog/p/8065199.html

總結(jié)

以上是生活随笔為你收集整理的vue 二进制文件的下载（解决乱码和解压报错）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。