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

Question

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

如何指定下载文件扩展名和文件名。

我尝试用下面的代码设置它，但没有任何效果。

    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>

Answer 1

使用 HTML5download属性下载BlobURL 文件

\n

\n

注意

\n

\n

download仅适用于 HTML5a或area标记 \xe2\x9c\x85的属性

\n

downloadvideoHTML5标记 \xe2\x9d\x8c上不存在属性

\n

下载Blob网址图片

\n

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

\n

// ES5\nfunction generatorBlobURL(url, type, dom, link) {\n  var xhr = new XMLHttpRequest();\n  xhr.open(\'GET\', url);\n  xhr.responseType = \'arraybuffer\';\n  xhr.onload = function(res) {\n    var blob = new Blob(\n      [xhr.response],\n      {\'type\' : type},\n    );\n    var urlBlob = URL.createObjectURL(blob);\n    // render `blob` url \xe2\x9c\x85\n    dom.src = urlBlob;\n    // using `a` tag download \xe2\x9c\x85\n    link.href = urlBlob;\n    link.innerText = urlBlob;\n    link.download = filename;\n  };\n  xhr.send();\n}\n\n(function() {\n  var type = \'image/png\';\n  var url = \'https://cdn.xgqfrms.xyz/logo/icon.png\';\n  var dom = document.querySelector(\'#img\');\n  var link = document.querySelector(\'#img-link\');\n  var arr = url.split(\'/\');\n  var filename = arr[arr.length - 1] || \'default-filename\';\n  generatorBlobURL(url, type, dom, link, filename);\n})();\n\n

\n

下载Blob网址视频

\n

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

\n

// ES5\nfunction generatorBlobURL(url, type, dom, link) {\n  var xhr = new XMLHttpRequest();\n  xhr.open(\'GET\', url);\n  xhr.responseType = \'arraybuffer\';\n  xhr.onload = function(res) {\n    var blob = new Blob(\n      [xhr.response],\n      {\'type\' : type},\n    );\n    var urlBlob = URL.createObjectURL(blob);\n    // render `blob` url \xe2\x9c\x85\n    dom.src = urlBlob;\n    // using `a` tag download \xe2\x9c\x85\n    link.href = urlBlob;\n    link.innerText = urlBlob;\n    link.download = filename;\n  };\n  xhr.send();\n}\n\n(function() {\n  var type = \'video/mp4\';\n  var url = \'https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4\';\n  var dom = document.querySelector(\'#video\');\n  var link = document.querySelector(\'#video-link\');\n  var arr = url.split(\'/\');\n  // arr.at(-1);\n  var filename = arr[arr.length - 1] || \'default-filename\';\n  setTimeout(() => {\n    generatorBlobURL(url, type, dom, link, filename);\n  }, 0);\n})();\n\n

\n

现场演示

\n

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

\n

\n

截图

\n

\n

\n

\n

参考文献

\n

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

\n