html5 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';  
});

html 5 Simple File Blob Download

demo

// <a >Download JSON</button>
// <button >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
});

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

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

refs

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

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

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

---