Instrucciones para este ensayo.
Advertencia: este artículo no es adecuado para las personas que buscan el "método de descarga XMLHttpRequest" (aunque mi título contiene estas palabras clave), este grupo puede ser un poco ignorante después de leer este artículo.
No hay un código completo para descargar archivos para XMLHttpRequest, solo una parte del código se extrae para resolver problemas específicos. Debido a que se extrae del proyecto, el código también contiene algunos otros marcos utilizados.
Descripción del problema
En el programa para descargar archivos, estamos usando la exportación de Excel aquí. Si el servidor no tiene datos adecuados para la exportación en este momento, nuestra solución original es exportar un Excel que contenga solo el encabezado de la columna del encabezado. Al poder descargar el archivo, el usuario ve un archivo que no contiene los datos que desea, y probablemente se perderá, no es muy fácil de usar. Luego lo pensé, o lancé el mensaje de error a Excel, y pienso que todavía no es amigable, por lo que existen las siguientes mejoras:
Solución
Cuando no hay datos adecuados para exportar o se produce un error predecible, el servidor devuelve un mensaje de error json data. En este momento, los extremos delantero y trasero deben ajustarse de la siguiente manera.
Use XMLHttpRequest para descargar archivos, por lo tanto, configure XMLHttpRequest.responseType = "blob", si el servidor devuelve datos json, el front end no puede analizar los datos json a través del esquema general;
Solución: el servidor devuelve un código de estado http específico Cuando se alcanza el código de estado, se realiza un procesamiento especial.
El backend devuelve un código de error 206 y datos json
// Para explicar el problema más claramente, todos los demás códigos se eliminan aquí, y solo se mantiene el código que devuelve el error. Public IActionResult GetPBbackDtoPrintListForPB (GetWorkTimeArrangeInput args) { Response.StatusCode = 206 ; string msg = "¡ Sin datos! ¡Hay datos debajo! " ; Devolver Json ( nuevo BizResult () {Éxito = falso , Mensaje = mensaje }); }
La parte del front-end que procesa json no puede procesarse con JSON.parse (resultado) como datos json de retorno normales, o directamente resultado.success, porque de esta manera no se pueden obtener los datos, y habrá errores indefinidos en la operación. Debe usar el siguiente método para leer la secuencia.
if ( this .status === 206) { // 处理 错误 提示 var result = this .response; if (result.type === 'application / json' ) { var reader = new FileReader (); reader.readAsText (resultado, 'utf-8' ); reader.onload = (e) => { var jsonData = JSON.parse (reader.result); if (! jsonData.success) { $ .messager.alert ( "警告", jsonData.message); } } }
El código frontal relativamente completo, debido al uso de otros marcos JS, si no puede usarlo, debe eliminar parte del código, y hay algunos paquetes de valor, el código es demasiado y está disperso en todas partes, no todos se enumeran aquí.
/ * * * 异步 下载 文件 依赖 easyui 的 进度 条 * * / downloadAsync: function (método, url, datos, contentType, displayfileName, callback) { if (! DisplayfileName) displayfileName = '' ; if (! method) method = "get" ; method = method.toLowerCase (); if (! url) throw "url mast tiene valor" ; if (method! = "post" && method! = "get" ) method = "; var xhr = new XMLHttpRequest (); var sendData = nulo ; if (data && ( typeof (data) == "object" || typeof (data) == "string" )) { if (contentType.toLowerCase () === "application / json" ) { sendData = JSON.stringify (datos); } else if (method.toLowerCase () === "get" ) { // 参数 追加 到 url 上 var params; if ( typeof (data) == ") parámetros = datos; else params = $ .param (datos); var ls = url.indexOf (url.length); switch (ls) { case "?" : case "&" : url + = params break ; valor predeterminado : if (url.indexOf ('?') <0 ) { url + = "?" + params; } else { url + = "&" + params; } break ; } } else { sendData = $ .param (data); } } xhr.open (method, url, true ); // También puede usar el método POST, de acuerdo con Interfaz xhr.setRequestHeader ('content-type' , contentType); xhr.responseType = "blob"; // Tipo de retorno blob $ .messager.progress ({msg: 'Descargando ...', intervalo: 0 }); var bar = $ .messager.progress ('bar' ); // progreso evento xhr.onprogress = function (ev) { if (ev.lengthComputable) { progress = ev.loaded / ev.total; // actualizar la barra de progreso .progressbar ('setValue', parseFloat (progress, 2) * 100 ); } }; // Defina la función de procesamiento para completar la solicitud xhr.onload = function () { // Solicitud de finalización if ( this .status === 200 ) { // devuelve 200 var blob = this .response; var reader = new FileReader (); reader.readAsDataURL (blob); // Convertir a base64, puede poner directamente un emoticon href reader.onload = function (e) { // La conversión se ha completado, crear Se utiliza una etiqueta a para descargar var a = document.createElement ('a' ); if (! DisplayfileName || typeof (displayfileName)! = 'String' ) displayfileName = new Date (). GetTime + '.txt' ; consola. log (displayfileName); a. descargar =displayfileName; a.href = e.target.result; $ ( "body"). append (a); // Fix firefox no puede activar el clic a.click (); $ (a) .remove (); if ( typeof (callback) == "function" ) callback (); }; } else if ( this .status === 206) { // Solicitud de manejo de errores var result = this .response; if(result.type === 'application / json' ) { var reader = new FileReader (); reader.readAsText (resultado, 'utf-8' ); reader.onload = (e) => { var jsonData = JSON.parse (reader.result); if (! jsonData.success) { $ .messager.alert ( "警告" , jsonData.message); } } } } más { errortitle = "错误" ; error = "导出 错误" ; cambiar ( este .status) { caso 404 : error + = "página no encontrada" ; salto ; caso 400 : error + = "el parámetro de exportación es incorrecto" ; descanso ; caso 500 : error + = " Error al exportar datos " ; pausa ; predeterminado: break ; } $ .messager.alert (errortitulo, error); } $ .messager.progress ( 'cerrar' ); }; xhr.onreadystatechange = function (ev) { } // 发送 ajax 请求 xhr.send (sendData); }