このエッセイの説明
警告:この記事は「XMLHttpRequestダウンロードファイルメソッド」を探している人には適していません(私のタイトルにはこれらのキーワードが含まれています)。この記事を読んだ後、このグループは少し無知になるかもしれません。
XMLHttpRequestのファイルをダウンロードするための完全なコードはなく、特定の問題を解決するためにコードの一部のみが抽出されます。コードはプロジェクトから抽出されるため、使用される他のいくつかのフレームワークも含まれます。
問題の説明
ファイルをダウンロードするプログラムでは、ここではExcelエクスポートを使用していますが、現時点でサーバーにエクスポートに適したデータがない場合、元の解決策はヘッダー列ヘッダーのみを含むExcelをエクスポートすることです。ファイルをダウンロードできるため、ユーザーには必要なデータが含まれていないファイルが表示され、ユーザーフレンドリーではないため、おそらく失われます。それから私はそれについて考えました、またはエラープロンプトをExcelに投げました、そしてそれはまだ友好的ではないと考えたので、次の改善があります:
解決策
エクスポートする適切なデータがない場合、または予測可能なエラーが発生した場合、サーバーはエラープロンプトのjsonデータを返します。このとき、フロントエンドとバックエンドを次のように調整する必要があります。
XMLHttpRequestを使用してファイルをダウンロードするため、 XMLHttpRequest.responseType = "blob"を設定します。サーバーがjsonデータを返す場合、フロントエンドは一般的なスキームでjsonデータを解析できません。
解決策:サーバーは特定のhttpステータスコードを返しますステータスコードに到達すると、特別な処理が実行されます。
バックエンドは206エラーコードとjsonデータを返します
// より明確に他のコードは、エラーコードの場合のみを残して、削除されている問題を、説明するためには、返された 公共IActionResult GetPBbackDtoPrintListForPB(GetWorkTimeArrangeInputの引数を) { Response.StatusCode = 206 ; 文字列 MSG = " データが必ずフィルタを作りません!その下にデータがあります!" ; Return Json(new BizResult(){Success = false、Message = msg}); }
フロントエンドのjsonを処理する部分は、通常の戻りjsonデータのようにJSON.parse(結果)で処理することはできません。この方法ではデータを取得できず、操作で未定義のエラーが発生するためです。ストリームから読み取るには、次のメソッドを使用する必要があります。
if(this .status === 206){ // 处理错误提示 var result = this .response; if(result.type === 'application / json' ){ var reader = new FileReader(); reader.readAsText(result、 'utf-8' ); reader.onload =(e)=> { var jsonData = JSON.parse(reader.result); if(!jsonData.success){ $ .messager.alert( "警告"、jsonData.message); } } }
他のJSフレームワークを使用しているため、比較的完全なフロントエンドコード。使用しない場合は、コードの一部を削除する必要があります。また、値渡しパッケージがいくつかあり、コードが多すぎて、どこにでも散在しているため、すべてがここにリストされているわけではありません
/ * * *异步下载文依赖easyui的進度条 * * / downloadAsync:function (method、url、data、contentType、displayfileName、callback){ if(!displayfileName) displayfileName = '' ; if(!method) method = "get" ; method = method.toLowerCase(); if(!url) throw "url mast has value" ; if(method!= "post" && method!= "get" ) method = "; var xhr = new XMLHttpRequest(); var sendData = null ; if(data &&(typeof(data)== "object" || typeof(data)== "string" )){ if(contentType.toLowerCase()=== "application / json" ){ sendData = JSON.stringify (データ); } else if(method.toLowerCase()=== "get" ){ // パラメータ追加到url上 var params; if(typeof(data)== ") params = data; そうでなければ params = $ .param(data); var ls = url.indexOf(url.length); スイッチ(ls){ ケース "?" : ケース "&" : url + = params break ; デフォルト: if(url.indexOf( '?')<0 ){ url + = "?" +パラメータ; } else { url + = "&" + params; } break ; } } else { sendData = $ .param(data); } } xhr.open(method、url、true); // POSTメソッドを使用することもできますインターフェース xhr.setRequestHeader( 'content-type' 、contentType); xhr.responseType = "blob"; // 戻り型blob $ .messager.progress({msg: 'Downloading ...'、interval:0 }); var bar = $ .messager.progress( 'bar' ); // 進行状況イベント xhr.onprogress = function (ev){ if (ev.lengthComputable){ progress = ev.loaded / ev.total; // 進行状況 バーを更新する .progressbar( 'setValue'、parseFloat(progress、2)* 100 ); } }; // リクエスト完了の処理関数を定義 xhr.onload = function (){ // リクエスト完了 if(this .status === 200 ) { // 200を返す var blob = this .response; var reader = new FileReader(); reader.readAsDataURL(blob); // base64に変換し、直接絵文字を配置できますhref reader.onload = function (e){ // 変換が完了し、作成しますaタグを使用して var a = document.createElement( 'a' ); if(!DisplayfileName || typeof(displayfileName)!= 'String' ) displayfileName = new Date().GetTime + '.txt' ;を コンソールを。ログ(displayfileName);ダウンロードします 。ダウンロード =displayfileName; a.href = e.target.result; $( "body")。append(a); // Firefoxがクリックをトリガーできない問題を修正 a.click(); $(a).remove(); if(typeof(callback)== "function" ) callback(); }; } else if(this .status === 206){ // エラー処理のプロンプト var result = this .response; if(result.type === 'application / json' ){ var reader = new FileReader(); reader.readAsText(result、 'utf-8' ); reader.onload =(e)=> { var jsonData = JSON.parse(reader.result); if(!jsonData.success){ $ .messager.alert( "警告" 、jsonData.message); } } } } else { errortitle = " " ; エラー = "导出错误"; スイッチ(this .status){ ケース 404 : エラー + = "ページが見つかりません" ; ブレーク; ケース 400 : エラー + = "エクスポートパラメータが正しくありません" ; ブレーク; ケース 500 : エラー + = "エクスポートデータの失敗" ; ブレーク; デフォルト ;: ブレーク } $ .messager.alert(errortitle、error); } $ .messager.progress( 'close' ); }; xhr.onreadystatechange = function (ev){ } // 発信送ajax请求 xhr.send(sendData); }