HTML5 auto download blob file All In One

HTML5 auto download blob file All In One

const obj = {
  id: 2012,
  msg: "hello, world",
  date: new Date(),
}

const alink = document.querySelector('#alink');

alink.addEventListener('click', () => {
    const json = JSON.stringify(obj);
    // binary stream Blob ✅
    const blob = new Blob(
      [json],
      {type: "octet/stream"}
    );
    const url = window.URL.createObjectURL(blob);
    alink.href = url;
    alink.target = '_blank';
    // target filename
    alink.download = 'html5-blob-file-download.json';
});

HTML5 Simple File Blob Download

demos

// <a id="myButton" href="#">Download JSON</button>
// <button id="btn">Download JSON</button>

// dummy json data to save
const data = {
    x: 42,
    s: "hello, world",
    d: new Date()
};

let btn = document.getElementById("btn");

btn.addEventListener(`click`, (e) => {
    let json = JSON.stringify(data),
        // Blob
        blob = new Blob([json], {type: "octet/stream"}),
        // blob to url
        url = window.URL.createObjectURL(blob);
    this.href = url;
    this.download = "api.json";
    this.target = "_blank";
    // target filename
});

demos

1. json

2. image / video

demos

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

refs

using HTML5 a tag download attribute for downloading the Blob URL file All In One

https://www.cnblogs.com/xgqfrms/p/16164626.html

https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link

https://stackoverflow.com/questions/6165266/downloading-mp3-files-using-html5-blobs-in-a-chrome-extension

---

---

©xgqfrms 2012-2021

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

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

---