MW211 EXIT

devlog
jQuery/CSVダウンロード・別ウインドウ表示
2021年09月17日
jQueryでCSVファイルを生成しダウンロードさせるには以下のような感じ。
┌──────────────────────────────────────┐
│const blob = new Blob([CSVデータ], {'type':'text/csv'});                    │
│$('<a></a>', {                                                              │
│    'href'      :window.URL.createObjectURL(blob),                          │
│    'download'  :'エクスポート.csv',                                        │
│    'target'    :'_blank'                                                   │
│})[0].click();                                                              │
└──────────────────────────────────────┘
アンカーリンクを生成し、クリックするようなイメージになる。

なお、UTF-8のBOMを先頭に付加する場合は以下のような感じとなる。
┌──────────────────────────────────────┐
│const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);                             │
│const blob = new Blob([bom, CSVデータ], {'type':'text/csv'});               │
│$('<a></a>', {                                                              │
│    'href'      :window.URL.createObjectURL(blob),                          │
│    'download'  :'エクスポート.csv',                                        │
│    'target'    :'_blank'                                                   │
│})[0].click();                                                              │
└──────────────────────────────────────┘

これと同じように自ら生成したHTMLを別ウインドウに開くこともできる。
┌──────────────────────────────────────┐
│const blob = new Blob([HTMLソースコード], {'type':'text/html'});            │
│$('<a></a>', {                                                              │
│    'href'      :window.URL.createObjectURL(blob),                          │
│    'target'    :'_blank'                                                   │
│})[0].click();                                                              │
└──────────────────────────────────────┘
分類:jQuery