Webフロントエンドはファイルフローの形でExcelファイルをエクスポートする
1008 ワード
一般的なWebフロントエンドでエクスポートファイルを処理するには、次の2つの方法があります.
今日は主に2つ目の方法を共有し、直接コード(ie 10以上対応):
その実現原理は、まずサービス側から返されたデータストリームを
1、 URL, URL ;
2、 , ;
今日は主に2つ目の方法を共有し、直接コード(ie 10以上対応):
// url
const exportParams = (url) => {
const aLink = document.createElement('a');
const blob = new Blob([url],{type: "application/vnd.ms-excel"});
// URL
const _href = URL.createObjectURL(blob);
aLink.style.display = 'none';
aLink.href = _href;
document.body.appendChild(aLink);
aLink.setAttribute('download', ' .xlsx');
aLink.click();
document.body.removeChild(aLink);
// URL
URL.revokeObjectURL(_href);
}
その実現原理は、まずサービス側から返されたデータストリームを
URL.createObjectURL()
方法でURLに変換することであり、このURLはメモリに格納され、URLのライフサイクルは作成されたdocument
にバインドされ、つまりdocument unload
のときにもメモリが解放される.次に、
のdownload
属性値を設定することにより、エクスポート機能が実現され、最後に作成したURLオブジェクトのメモリが手動で解放される.