フロントエンドは応答ヘッダー Content-Disposition 内のファイル名をどのように取得しますか?

質問：

バックエンドがファイル ストリームを返すとき、応答ヘッダーにファイルの種類を含めます。フロントエンドはファイル名を取得した後にファイル名のサフィックスを手動で追加する必要があります。

コード：

フロントエンド：

downloadFile(response, fileName) {
	const headers = response.headers;
	const contentType = headers['content-type'];
	const blob = new Blob([response.data], { type: contentType });
	const temp = response.headers['content-disposition'];
	let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
	let matches = filenameRegex.exec(temp);
	let fileType = '';
	if (matches != null && matches[1]) {
		fileType = matches['input'].substring(matches['input'].lastIndexOf('.'));
	}
	var downloadElement = document.createElement('a');
	var href = window.URL.createObjectURL(blob); //创建下载的链接
	downloadElement.href = href;
	downloadElement.download = fileName + fileType; //下载后文件名
	document.body.appendChild(downloadElement);
	downloadElement.click(); //点击下载
	document.body.removeChild(downloadElement); //下载完成移除元素
	window.URL.revokeObjectURL(href); //释放掉blob对象
}

後部：

デフォルトでは、外部に公開できる単純な応答ヘッダーは 6 つだけです。

• キャッシュ制御
• コンテンツ言語
• コンテンツタイプ
• 有効期限が切れます
• 最終更新日
• プラグマ

フロントエンドアクセス用に Content-disposition を公開するには、setHeader をバックエンドに追加する必要があります。

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)