how to download blob file just using HTML and JavaScript All In One

how to download blob file just using HTML and JavaScript All In One

HTML5 download file

<video 
    width="300px"
    id="video"
    type="video/mp4"
    filename="demo.mp4"
    download="demo.mp4"
    controls=""
    src="blob:https://cdn.xgqfrms.xyz/dd73353f-b8f3-4675-a826-c053c6a8cb57">
</video>

https://cdn.xgqfrms.xyz/blob-video-file.mp4 => blob:https://cdn.xgqfrms.xyz/dd73353f-b8f3-4675-a826-c053c6a8cb57

服务端决定如何处理 blob 文件，是否支持下载...

客户端决定如何展示 blob 文件，是否支持下载...

HTML5 a tag download attribute

blob:https:// Blob 文件，通过设置 a 的 download 属性和 href 属性, 是可以下载 ✅

blob:localhost:// Blob 文件，通过设置 a 的 download 属性和 href 属性, 是可以下载 ✅

# big screen shortcut
![](https://img2022.cnblogs.com/blog/740516/202204/740516-20220411010721358-179137342.png)

# small screen shortcut

![](https://img2022.cnblogs.com/blog/740516/202204/740516-20220411011546690-1981885607.png)

https://cdn.xgqfrms.xyz/HTML5/Blob/index.html

solution ✅

XHR

function generatorBlobVideo(url, type, dom, link) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer';
  // xhr.responseType = 'arrayBuffer';
  // xhr.responseType = 'Blob';
  // xhr.responseType = type;
  xhr.onload = function(res) {
    console.log('res =', res);
    console.log('xhr.response =', xhr.response);
    // var file = new File([url], "filename", {
    //   type: type,
    // });
    // console.log('file =', file);
    var blob = new Blob(
      [xhr.response],
      // [file],
      // [url],
      // [new File(xhr.response, 'test')],
      // ['https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4'],
      {'type' : type},
    );
    var urlBlob = URL.createObjectURL(blob);
    dom.src = urlBlob;
    link.href = urlBlob;
    link.innerText = urlBlob;
    // console.log('urlBlob', urlBlob);
    // console.log('link', link);
  };
  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');
  console.log('img link =', link);
  generatorBlobVideo(url, type, dom, link);
})();
(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');
  console.log('vidoe link =', link);
  setTimeout(() => {
    generatorBlobVideo(url, type, dom, link);
  }, 3000);
})();

<iframe
    height="500" style="width: 100%;" scrolling="no" title="XHR &amp; Blob"
    src="https://cdn.xgqfrms.xyz/HTML5/Blob/index.html?theme=dark"
    frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

Fetch API

sandbox

<!-- No sandbox there... Popup window won't be sandboxed as well -->
<iframe id="red" src="iframe.html"></iframe>

<!-- This sandboxed frame will allow sandboxed popup window to open popups but not to execute JavaScript for instance. -->
<iframe id="green" src="iframe.html" sandbox="allow-popups"></iframe>

<!-- This sandboxed frame will create a clean non sandboxed popup window, allowed to execute JavaScript and open popups. -->
<iframe id="blue" src="iframe.html"
        sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>

https://googlechrome.github.io/samples/allow-popups-to-escape-sandbox/

demos

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://stackoverflow.com/questions/71686536/how-to-set-the-download-file-extension-for-blob-data

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---