title: Change Blob Filename
body: <p>I am using code from <a href="https://stackoverflow.com/a/49500465/10241621">https://stackoverflow.com/a/49500465/10241621</a> that downloads file from link. It does work but I do not know how to make a custom filename.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function forceDownload(blob, filename) {
    var a = document.createElement('a');
    a.download = filename;
    a.href = blob;
    // For Firefox https://stackoverflow.com/a/32226068
    document.body.appendChild(a);
    a.click();
    a.remove();
  }
  
  // Current blob size limit is around 500MB for browsers
  function downloadResource(url, filename) {
    if (!filename) filename = url.split('\\').pop().split('/').pop();
    fetch(url, {
        headers: new Headers({
          'Origin': location.origin
        }),
        mode: 'cors'
      })
      .then(response =&gt; response.blob())
      .then(blob =&gt; {
        let blobUrl = window.URL.createObjectURL(blob);
        forceDownload(blobUrl, filename);
      })
      .catch(e =&gt; console.error(e));
  }
  
  downloadResource('https://giant.gfycat.com/RemoteBlandBlackrussianterrier.webm');</code></pre>
  </div>
  </div>
  </p>