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);
})
},