セキュリティ上の理由により、フロントエンドはファイルに直接書き込むことができません。
しかし、実際のビジネス ニーズでは、さまざまなファイルのダウンロードやプレビューに遭遇することは避けられません。
サーバーによってダウンロードされたファイルがストリームの形式でフロントエンドに配信される場合、フロントエンドは通常、ストリームを借用属性に変換してファイルをダウンロードしobjectURLます。a标签download
球体
意味
Blob はバイナリ タイプのラージ オブジェクトを表し、通常はイメージ、サウンド、またはマルチメディア ファイルです。JavaScript では、Blob は不変のプリミティブ データのようなファイル オブジェクトを表します。
そのコンストラクタは次のとおりです。
new Blob(blobParts, options);
blobParts: 任意の数の ArrayBuffer、ArrayBufferView、Blob、または DOMString (UTF-8 としてエンコードされます) を格納できる配列型で、それらを接続して Blob オブジェクトのデータを形成します。options: オプション、blob オブジェクトのプロパティを設定するために使用. 次の 2 つのプロパティを指定できます:
– type: blob に格納されている配列コンテンツの MIME タイプ (デフォルトは "")、たとえばimage/png.
– 終了: 改行文字を変換するかどうか。行末文字 \n を含む文字列の書き方を指定するために使用されます。native の値は、行末記号がホスト オペレーティング システムのファイル システムに適した改行文字に変更されることを意味します (デフォルト値は transparent であり、blob に保存された終端記号が変更されないことを意味します)。
例: (文字列から Blob を作成)
let blob = new Blob(["<html>…</html>"], {
type: 'text/html'});
注意: 最初のパラメータは配列でなければなりません[...]
属性
Blob オブジェクトには 2 つのプロパティがあります。下の表を参照してください。
| 属性名 | 説明 |
|---|---|
| サイズ | Blob オブジェクトに含まれるデータのサイズ。単位はバイトです。読み取り専用。 |
| タイプ | この Blob オブジェクトに含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、値は空の文字列です。読み取り専用。 |
例えば：
const blob = new Blob(['<div>john</div>'], {
type: 'text/xml' });
console.log(blob); // Blob {size: 15, type: "text/xml"}
ストリームファイルダウンロードのフロントエンド実装
const res = await axiosRequest({
url: state.exportUrl,
method: 'post',
data: form,
responseType: 'blob', // 设置返回为二进制流
});
downloadSource(res); // 调用此方法实现下载流文件
// 下载流
const downloadSource = (res: any) => {
let url =(window.URL || window.webkitURL).createObjectURL(new Blob([res], {
type:'application/zip'}));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', `${
这里写文件名})`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
new Blobの 2 番目のパラメーターは、次のように設定できます。
Word ファイル:
.docフォーマットの設定:application/vnd.msword;charset=utf-8
.docxフォーマットの設定:application/vnd.openxmlformats-officedocument.wordprocessingml.document
Excel ファイル:
.xlsフォーマットの設定:application/vnd.ms-excel
.xlsxフォーマットの設定:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
zip ファイル:
. zipフォーマットは次のように設定されています:application/zip
https://juejin.cn/post/6844904183661854727
https://juejin.cn/post/6916675943343849479