一般的に、jsファイルのダウンロードではwindow.location.hrefを使用してバックエンドインターフェイスを検索し、バックエンドがファイルを生成して返すと、ブラウザが自動的にダウンロードします。この方法は最も簡単ですが、ダウンロード成功の通知を受け取ることはできません。大きなファイルを生成してダウンロードすると、時間が長すぎて、ユーザーがダウンロードクリックを繰り返す可能性があり、サーバーに負担がかかります。
したがって、ファイルのダウンロードの完了を監視するには、別の方法でリクエストを送信する必要があります。このメソッドはXMLHttpRequestを使用してリクエストし、ファイルのダウンロードの完了を監視できます。さらに、ダウンロードの進行状況バーを監視する場合、設定cookieループを逆方向に使用できます。この記事では、進行状況を要求する前者の方法についてのみ説明します。
bbはあまりない、始めて
これは私が始めたバージョンです:
load = function() {
//填写你的下载时加载的提示
}
disload = function() {
//下载完成后触发,用来关闭提示框
}
getDownload = function(url) {
load();
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 也可用POST方式
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var headerName = xhr.getResponseHeader("Content-disposition");
var fileName = decodeURIComponent(headerName).substring(20);
var a = document.createElement('a');
a.download = fileName + ".xls";
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
};
disload();
}
};
xhr.send()
};
この原則は、XMLHttpRequestを介してリクエストを送信し、FileReaderを使用してファイルのコンテンツを読み取ることです。重要なのは、タグを設定し、blobのファイルコンテンツをbase64に変換して、タグのhrefに配置することです。クリックしてダウンロードをシミュレートします。
ただし、注意が必要です
- タグのダウンロードはテスト済みであり、GoogleおよびFirefoxブラウザーでのみ機能し、エッジおよびIEでのダウンロードはトリガーされません。
- タグのURLアドレスとしてbase64を使用する場合、長さの制限により約2Mまでのファイルしかダウンロードできず、それより高い場合はダウンロードが失敗します。
最初の質問
ieなどのブラウザの場合、ダウンロードをトリガーする別の方法があります。
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime });
}
//e.target.result 正是上面代码中转换后的baseUrl,这种方法要转换为blob
var blob = dataURLtoBlob(e.target.result);
navigator.msSaveBlob(blob, fileName + ".xls");
navigator.msSaveBlobはGoogleなどのブラウザには存在しないことに注意してください。ここで、最初の問題が解決されます。
2番目の質問
2番目の質問は、実際には需要によって異なります。小さなアイコンなどの非常に小さなファイルの場合は、URLアドレスとしてbase64を使用できます。その他の大きなファイルの場合は、ファイルをメモリに保存して、仮想メモリアドレスを指すことができます。
var blob = dataURLtoBlob(e.target.result);
var a = document.createElement('a');
a.download = fileName + ".xls";
a.href = URL.createObjectURL(blob);
$("body").append(a); // 修复firefox中无法触发click
a.click();
URL.revokeObjectURL(a.href);
$(a).remove();
URL.createObjectURLは、ファイルをBLOBの形式で保存し、ダウンロード用のURLを返します。URL.revokeObjectURLは、メモリが解放されます。この時点で、2つの問題は解決されました。base64は大きなファイルにはまったく使用できないことがわかります。blobを直接使用するのが最善です。したがって、最終バージョンは、以下を組み合わせることで取得できます。
最終版
load = function() {
//填写你的下载时加载的提示
}
disload = function() {
//下载完成后触发,用来关闭提示框
}
getDownload = function(url) {
load();
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 也可用POST方式
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response;
if (navigator.msSaveBlob == null) {
var a = document.createElement('a');
var headerName = xhr.getResponseHeader("Content-disposition");
var fileName = decodeURIComponent(headerName).substring(20);
a.download = fileName;
a.href = URL.createObjectURL(blob);
$("body").append(a); // 修复firefox中无法触发click
a.click();
URL.revokeObjectURL(a.href);
$(a).remove();
} else {
navigator.msSaveBlob(blob, fileName);
}
}
disload();
};
xhr.send()
};