How to set the download file extension for blob data

Question

In my site video use the blob data, when the video was downloaded, the saved filename is the blob name with .txt(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.txt) extension in Chrome borwser, while in firefox is with .mp4(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.mp4) extension.

How can I specific the download file extension and the filename.

I've tried to set it with below code, but none works.

    type="video/mp4"
    filename="111.mp4"
    download="111.mp4"

Here is the sample code, I use now.

<video 
    width="300px"
    id="video"
    type="video/mp4"
    filename="111.mp4"
    download="111.mp4"
    controls=""
    src="blob:http://localhost/4671addc-3ce0-4eb6-b414-ddf3406b1fe5">
</video>

Answer 1

using HTML5 download attribute download the Blob URL file

Notice

download attribute only for HTML5 a or area tag ✅

download attribute not exist on HTML5 video tag ❌

download Blob URL image

<section>
  <img id="img" />
  <a id="img-link" download>...loading</a>
</section>

// ES5
function generatorBlobURL(url, type, dom, link) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(res) {
    var blob = new Blob(
      [xhr.response],
      {'type' : type},
    );
    var urlBlob = URL.createObjectURL(blob);
    // render `blob` url ✅
    dom.src = urlBlob;
    // using `a` tag download ✅
    link.href = urlBlob;
    link.innerText = urlBlob;
    link.download = filename;
  };
  xhr.send();
}

(function() {
  var type = 'image/png';
  var url = 'https://cdn.xgqfrms.xyz/logo/icon.png';
  var dom = document.querySelector('#img');
  var link = document.querySelector('#img-link');
  var arr = url.split('/');
  var filename = arr[arr.length - 1] || 'default-filename';
  generatorBlobURL(url, type, dom, link, filename);
})();

download Blob URL video

<section>
  <video id="video" controls width="400" height="300">
    loading...
  </video>
  <br>
  <a id="video-link" download>...loading</a>
</section>

// ES5
function generatorBlobURL(url, type, dom, link) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(res) {
    var blob = new Blob(
      [xhr.response],
      {'type' : type},
    );
    var urlBlob = URL.createObjectURL(blob);
    // render `blob` url ✅
    dom.src = urlBlob;
    // using `a` tag download ✅
    link.href = urlBlob;
    link.innerText = urlBlob;
    link.download = filename;
  };
  xhr.send();
}

(function() {
  var type = 'video/mp4';
  var url = 'https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4';
  var dom = document.querySelector('#video');
  var link = document.querySelector('#video-link');
  var arr = url.split('/');
  // arr.at(-1);
  var filename = arr[arr.length - 1] || 'default-filename';
  setTimeout(() => {
    generatorBlobURL(url, type, dom, link, filename);
  }, 0);
})();

live demo

https://codepen.io/xgqfrms/full/YzYRLwg

screenshots

refs

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes