如何设置Blob数据的下载文件扩展名

Question

在我的网站上，视频使用blob数据。当视频被下载时，在Chrome浏览器中保存的文件名是带有.txt扩展名的blob名称（4671addc-3ce0-4eb6-b414-ddf3406b1fe5.txt），而在Firefox中则是带有.mp4扩展名（4671addc-3ce0-4eb6-b414-ddf3406b1fe5.mp4）。

我该如何指定下载文件的扩展名和文件名？

我尝试了下面的代码，但都没有成功。

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

这是我现在使用的示例代码。

<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>

- LF00

---

使用download来指定建议的文件名，这个方法适用于使用data: URI时的情况，详情请见在使用data: URI时有没有办法指定一个建议的文件名？。但是对于blob uri，这里并不适用。 - LF00

在如何设置从浏览器下载的文件名称？中提供的解决方案在这里也不起作用。 - LF00

如何修改视频标签的内部媒体控件下载事件？ - LF00

在创建 Blob 数据时，通过指定 Blob 类型来解决问题。var blob = new Blob([buffer],{'type': 'video/mp4'}) - LF00

Answer 1

使用 HTML5 download 属性下载 Blob URL 文件

注意

download 属性仅适用于 HTML5 的 a 或 area 标签 ✅

download 属性不存在于 HTML5 的 video 标签 ❌

下载 Blob URL 图片

<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);
})();

下载 Blob URL 视频

<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);
})();

实时演示

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

屏幕截图

参考资料

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

- xgqfrms

---

HTML5的download属性是为a标签设计的，而不是为video标签设计的；您应该创建自定义事件处理程序或使用a标签进行包装。 - xgqfrms

尝试使用这个库 https://videojs.com/。 - xgqfrms

如果我们不确定文件扩展名，是否可以根据接收到的 blob 指定文件扩展名？ - Ali Baghban

@AliBaghban 当然可以！更多细节请参考这个演示 https://codepen.io/xgqfrms/full/ExEgKjQ - xgqfrms

@xgqfrms 不好意思，你说得对。我忽略了可以从URL本身获取扩展名的部分。感谢你指出来。 - Ali Baghban