Transmisión de archivos de recepción y procesamiento de front-end (descarga de Vue en Excel)

Generalmente, al realizar estadísticas de datos, el back-end no guardará la descarga en el servidor y devolverá la dirección de descarga, sino que devolverá directamente el flujo de archivos. En este momento, el front-end recibirá el flujo de procesamiento por sí mismo.

Flujo de procesamiento

Déjame hablar sobre el proceso de recepción y procesamiento.

1. Almacene la transmisión que recibimos en la URL del objeto
2. Cree una etiqueta a y vincule la URL del objeto a la etiqueta a, y luego monte la etiqueta a en el árbol dom
3. Active el evento de clic de la etiqueta a a través de js para descargar el archivo
4. Libera la URL y una etiqueta que creamos

Implementación de código específico

Tome vue como ejemplo, usando axios request

this.$axios.post("/downloadDt", param).then(res => {
    
    
	// 创建一个 a 标签，并隐藏 a 标签
	let a = document.createElement("a");
	a.style.display = "none";
	
	// 对象 URL 绑定到 a 标签上
	a.href = window.URL.createObjectURL(new Blob([res.data]));

	// 给 a 标签添加 download 属性 与 文件名
	a.setAttribute("download", `数据报表${
    
    new Date().toLocaleString()}.xls`);
	
	// 把 a 标签挂载到 dom 树上并执行 a 标签的 click 事件
	document.body.appendChild(a);
	a.click();

	// 释放我们创建的 url 和 a 标签
	window.URL.revokeObjectURL(a.href);
	document.body.removeChild(a);
}