<h1 id="hce8e0f4909">Blobを使うとChromeがエラーになる</h1> 5MB程度のファイルを<code>Blob</code>を使ってChromeからファイルとして出力しようと思ったが、Chromeがクラッシュしてしまい、うまくいかない。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/7ef4457d8e9c4d28978b92205e1686f2/javascript_blob-error_blob-chrome-error.png" alt=""><img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/bdf41c08c1be4ba380b009c9ad7fcee8/javascript_blob-error_blob-dev-error.png" alt=""> というか小さなサイズのファイルでも正しい形式にならない。 データをUint8Array型からファイルに変換するときの失敗例 <pre><code>[javascript:JavaScript]
const data = new Uint8Array(fileObject)
const blob = new Blob(data, {type: 'text/plain'})</code></pre> <h2 id="h26b83d0ec1">配列でないとダメ</h2> Uint8Array型は配列だと思ってたのですが、さらに配列に入れてやらないとダメらしい。 <code>[]</code>で囲むだけでうまくいきました。 <pre><code>[javascript:JavaScript]
const blob = new Blob([data], {type: 'text/plain'})</code></pre> <h2 id="h20606edc3d">ファイルのダウンロード</h2> ちなみに、これをブラウザからダウンロードさせるときは、以下のようにして、URLを作成します。 <pre><code>[javascript:JavaScript]
const url = window.URL.createObjectURL(blob)</code></pre> これを<code>&lt;a&gt;</code>タグの<code>href</code>に指定してあげればOK。 ていうかよく見たらMDNにちゃんと書いてあった。 <a href="https://developer.mozilla.org/ja/docs/Web/API/Blob" target="_blank" rel="noopener noreferrer">Blob | MDN</a>

ゆったりWeb手帳

気になったことをのんびり書くよ