How to Specify a Suggested Filename When Using Data: Uri

How to change filename and extension while downloading a text file from data uri

FileSaver.js provides easy ways to handle these

How to set the download file extension for blob data

using HTML5 download attribute download the Blob URL file

Notice

download attribute only for HTML5 a or area tag ✅

download attribute not exist on HTML5 video tag ❌

download Blob URL image

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

download Blob URL video

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

live demo

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

screenshots

refs

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

Downloading json including newline characters via data uri

Problem lies in different line endings on different OS. Try this example...

var json = '{\n\t"foo": 23,\n\t"bar": "hello"\n}';var a = document.createElement('a');document.body.appendChild(a);
a.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(json));a.setAttribute('download', 'test.json');
a.click();

var jsonWindows = '{\r\n\t"foo": 23,\r\n\t"bar": "hello"\r\n}';
a.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(jsonWindows));a.setAttribute('download', 'test (Windows).json');
a.click();