Vue export Excel garbled problem (solved)

The backend has already written the interface for exporting Excel, and calling the interface will find that the backend returns a binary stream file

Implementation:

When encapsulating the interface, pass a parameter to the interface  [responseType: 'blob']   This parameter is the key to deal with the problem of garbled data in the exported Excel table

// 导出订单
export const exportOrder = query => {return request({url: '/shop/order.php',method: 'post',params: query,responseType: 'blob'});};

 Write the implementation method in the page

// 订单导出
getOrderExport(){
	exportOrder(this.query).then(res => {
		console.log(res);
		const link = document.createElement('a');// 创建a标签
		let blob = new Blob([res],{type: 'application/vnd.ms-excel;charset=UTF-8'}); // 设置文件类型 
		link.style.display = "none";
		link.href = URL.createObjectURL(blob); // 创建URL
		link.setAttribute("download", "订单.xls");
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	})
},

Guess you like

Origin blog.csdn.net/weixin_45990765/article/details/122249441