vue 文件转换二进制_vue+axios下载后端返回的二进制流文件

blob

BLOB就是使用二进制保存数据。

数据的导出，get方式

/**

* 数据导出

*/

exportData (searchForm) {

this.$http({

method: 'get', // 请求方式

url: Apis.EXPORT_DATA, // 请求地址

params: { // 请求参数

startDate: searchForm.startDate,

endDate: searchForm.endDate,

orderNo: searchForm.orderNo,

carNo: searchForm.carNo,

entryBy: searchForm.entryBy,

status: searchForm.status,

insurer: searchForm.insurer

},

responseType: 'blob' // 重点，请求的数据类型

})

.then(response => {

/* 兼容ie内核，360浏览器的兼容模式 */

if (window.navigator && window.navigator.msSaveOrOpenBlob) {

let blob = new Blob([response.data])

window.navigator.msSaveOrOpenBlob(blob, '数据导出.xls')

} else {

/* 火狐谷歌的文件下载方式 */

var blob = new Blob([response.data])

var downloadElement = document.createElement('a')

var href = window.URL.createObjectURL(blob)

downloadElement.href = href

downloadElement.download = '数据导出.xls'

document.body.appendChild(downloadElement)

downloadElement.click()

document.body.removeChild(downloadElement)

window.URL.revokeObjectURL(href)

}

})

.catch(response => {

console.log(response)

})

}

文件的下载,post方式

downloadOrder (row) {

this.$http.post(Apis.DOWNLOAD+`/${row.cargoOderId}`, {admin: '', keys: '123', keyword: '123'}, {responseType: 'blob'})

.then(response => {

if (window.navigator && window.navigator.msSaveOrOpenBlob) {

let blob = new Blob([response.data])

window.navigator.msSaveOrOpenBlob(blob, `${row.orderNo}.pdf`)

} else {

var blob = new Blob([response.data])

var downloadElement = document.createElement('a')

var href = window.URL.createObjectURL(blob)

downloadElement.href = href

downloadElement.download = `${row.orderNo}.pdf`

document.body.appendChild(downloadElement)

downloadElement.click()

document.body.removeChild(downloadElement)

window.URL.revokeObjectURL(href)

}

})

.catch(response => {

console.log(response)

})

}

疑惑：{admin: '', keys: '123', keyword: '123'}，为什么要使用这句代码？

bug：如果没有上面那句代码，下载的pdf文件打开居然需要密码，可我没有设置密码啊。设置了上面那句代码以后，pdf文件才可以打开。一脸懵逼....，哪位大佬可以帮忙解惑一下，非常感谢