后台管理项目blob导出文件乱码解决方案

项目中需要导出文件,使用blob对象方法导出文件成功,但是打开文件就是乱码,有时甚至打不开。导出代码如下:

handleExport() {
	//exportFlie是调用接口的方法,如下:
	//export function exportFlie(data) {
	  //return request({
	    //url: '/xxxx/v2/xxxxx',
	    //method: 'get',
	    //params: data,
	   // responseType: 'blob'
	 // })
	//}
   exportFlie(this.listQuery).then(res => {
     const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
     const url = window.URL.createObjectURL(blob)
     const aLink = document.createElement('a')
     aLink.style.display = 'none'
     aLink.href = url
     aLink.setAttribute('download', new Date().getTime() + '.xlsx')
     document.body.appendChild(aLink)
     aLink.click()
     document.body.removeChild(aLink) // 下载完成移除元素
     window.URL.revokeObjectURL(url) // 释放掉blob对象
   })
 }

Blob,Binary Large Object的缩写,代表二进制类型的大对象。

导出文件后乱码,解决方法就是接收数据的响应类型也要设置成blob。如下。

responseType: 'blob'

再次导出就解决了乱码问题。

你可能感兴趣的:(前端,Vue)