背景には、フロントエンドのファイルのダウンロードを達成するためにどのように、ストリームファイルを来ました

これらの二日間は、プロセスログのダウンロード機能では、新しい独自の孟としてバイナリストリームファイルの形で楽屋パスのフロントエンドインタフェースは、またプロセスに多くの情報を見つけます。多くのオンラインの方法がありますが、本当に自分のアプリケーションやコード上で有効である、それは本当に簡単ではありません。仕事の後、すぐに自分のために蓄積された経験をまとめます。

背景には、ストリームファイルを来て、コール・インターフェースが正常に応答がある場合、元の背景ファイル転送ストリームデータ、フロントエンドストリームファイル処理の必要性、ファイル圧縮のダウンロードで見つけました。

コールバックインターフェース状態200が、常に、コードとコードをキャッチするためにジャンプし、その後行くその後、確かに、コードにエラーがあるないので、コードを行っていません。他の誰かpostFormパッケージaxiosコード上の自分の時間がaxisosを取得するカプセル化され、結果は不要です。実際には、ライン上で以下の方法を直接使用します。

store.jsで

// 肯定是有paramsは且のparams = { 'ファイル名：ファイル名、' filePathに：filePathに'} 
该方法名为WWWW 
axios 
に.get（
　　 ' /eng/downlog?fileName-&(params.fileName)&filePath=&(params。 filePathに）
）.then（応答=> { 
　　にconsole.log（応答）; 
}）.catch（関数（誤差）{ 
　　にconsole.log（エラー）; 
}）;

downLOgで（）メソッドのxx.vueダウンロードで

downLOg（ファイル名はファイルパス）{ 

paramsはせ = {
　　 ' ：ファイル名、fileNameに
　　 filePathに：filePathに'' 
} 
。この$ stroe.dispatch（ 'WWWW' 、paramsは）
.then（応答=> { 
   CONSTブロブ=新たなBLOB（[応答を]）; 
   CONST downloadElement =のdocument.createElement（ ""）; 
   CONST HREF = window.URL.createObjectURL（BLOB）; 
   CONST名= params.fileName; 
   downloadElement.href = HREF; 
   downloadElement.download =名; 
   document.body。 appendChild（downloadElement）; 
   downloadElement.click（）; 
   document.body.removeChild（downloadElement）; 
   window.URL.revokeObjectURL（HREF）; 
}）
.catch（ERR => { 

}）
}

ログはアーカイブ.zipファイルをダウンロードすることができます。

しかし、ダウンロードしたアーカイブ、オープン、ファイルを向上させるには、損傷しています。「ブロブ」：オリジナルはresponseTypeではありません。

次のようにstore.jsで補足：

.get（
　　 '/eng/downlog?fileName-&(params.fileName)&filePath=&(params.filePath),{responseType:'blob' } 
）.then（応答=> { 
　　にconsole.log（応答）; 
}） .catch（関数（誤差）{ 
　　にconsole.log（エラー）; 
}）;

ダウンロードパッケージに行く、それはそれはダウンロードすることができたが、また、通常の解凍。

背景には、フロントエンドのファイルのダウンロードを達成するためにどのように、ストリームファイルを来ました

おすすめ