Javascript Filesaver.js Library Example to Download Files From URL as Attachment in Browser

Welcome folks today in this blog post we will be talking about a new javascript library called as filesaver.js library which lets the user downloads the files such as images,pdf and videos from url as an attachment inside the browser.

Installation

Now to install this library there are various options available. If you want to use in the browser using javascript you can use the cdn link and include it inside the html as shown below

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FileSaver.js CDN Example in Browser</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js'></script>
</head>
</html>

<!doctype html>

<html>

<head>

<title>FileSaver.js CDN Example in Browser</title>

</head>

</html>

The second option is to use at the node.js server side. You can install it as a module by executing the below command

npm i file-saver

Third option is very simple you can create filesaver.js and copy paste the entire code of the library which is shown below

filesaver.js

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define([], factory);
  } else if (typeof exports !== "undefined") {
    factory();
  } else {
    var mod = {
      exports: {}
    };
    factory();
    global.FileSaver = mod.exports;
  }
})(this, function () {
  "use strict";

  /*
  * FileSaver.js
  * A saveAs() FileSaver implementation.
  *
  * By Eli Grey, http://eligrey.com
  *
  * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
  * source  : http://purl.eligrey.com/github/FileSaver.js
  */
  // The one and only way of getting global scope in all environments
  // https://stackoverflow.com/q/3277182/1008999
  var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;

  function bom(blob, opts) {
    if (typeof opts === 'undefined') opts = {
      autoBom: false
    };else if (typeof opts !== 'object') {
      console.warn('Deprecated: Expected third argument to be a object');
      opts = {
        autoBom: !opts
      };
    } // prepend BOM for UTF-8 XML and text/* types (including HTML)
    // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF

    if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
      return new Blob([String.fromCharCode(0xFEFF), blob], {
        type: blob.type
      });
    }

    return blob;
  }

  function download(url, name, opts) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'blob';

    xhr.onload = function () {
      saveAs(xhr.response, name, opts);
    };

    xhr.onerror = function () {
      console.error('could not download file');
    };

    xhr.send();
  }

  function corsEnabled(url) {
    var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker

    xhr.open('HEAD', url, false);

    try {
      xhr.send();
    } catch (e) {}

    return xhr.status >= 200 && xhr.status <= 299;
  } // `a.click()` doesn't work for all browsers (#465)


  function click(node) {
    try {
      node.dispatchEvent(new MouseEvent('click'));
    } catch (e) {
      var evt = document.createEvent('MouseEvents');
      evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
      node.dispatchEvent(evt);
    }
  } // Detect WebView inside a native macOS app by ruling out all browsers
  // We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
  // https://www.whatismybrowser.com/guides/the-latest-user-agent/macos


  var isMacOSWebView = /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent);
  var saveAs = _global.saveAs || ( // probably in some web worker
  typeof window !== 'object' || window !== _global ? function saveAs() {}
  /* noop */
  // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
  : 'download' in HTMLAnchorElement.prototype && !isMacOSWebView ? function saveAs(blob, name, opts) {
    var URL = _global.URL || _global.webkitURL;
    var a = document.createElement('a');
    name = name || blob.name || 'download';
    a.download = name;
    a.rel = 'noopener'; // tabnabbing
    // TODO: detect chrome extensions & packaged apps
    // a.target = '_blank'

    if (typeof blob === 'string') {
      // Support regular links
      a.href = blob;

      if (a.origin !== location.origin) {
        corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');
      } else {
        click(a);
      }
    } else {
      // Support blobs
      a.href = URL.createObjectURL(blob);
      setTimeout(function () {
        URL.revokeObjectURL(a.href);
      }, 4E4); // 40s

      setTimeout(function () {
        click(a);
      }, 0);
    }
  } // Use msSaveOrOpenBlob as a second approach
  : 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {
    name = name || blob.name || 'download';

    if (typeof blob === 'string') {
      if (corsEnabled(blob)) {
        download(blob, name, opts);
      } else {
        var a = document.createElement('a');
        a.href = blob;
        a.target = '_blank';
        setTimeout(function () {
          click(a);
        });
      }
    } else {
      navigator.msSaveOrOpenBlob(bom(blob, opts), name);
    }
  } // Fallback to using FileReader and a popup
  : function saveAs(blob, name, opts, popup) {
    // Open a popup immediately do go around popup blocker
    // Mostly only available on user interaction and the fileReader is async so...
    popup = popup || open('', '_blank');

    if (popup) {
      popup.document.title = popup.document.body.innerText = 'downloading...';
    }

    if (typeof blob === 'string') return download(blob, name, opts);
    var force = blob.type === 'application/octet-stream';

    var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;

    var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);

    if ((isChromeIOS || force && isSafari || isMacOSWebView) && typeof FileReader !== 'undefined') {
      // Safari doesn't allow downloading of blob URLs
      var reader = new FileReader();

      reader.onloadend = function () {
        var url = reader.result;
        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
        if (popup) popup.location.href = url;else location = url;
        popup = null; // reverse-tabnabbing #460
      };

      reader.readAsDataURL(blob);
    } else {
      var URL = _global.URL || _global.webkitURL;
      var url = URL.createObjectURL(blob);
      if (popup) popup.location = url;else location.href = url;
      popup = null; // reverse-tabnabbing #460

      setTimeout(function () {
        URL.revokeObjectURL(url);
      }, 4E4); // 40s
    }
  });
  _global.saveAs = saveAs.saveAs = saveAs;

  if (typeof module !== 'undefined') {
    module.exports = saveAs;
  }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

(function (global, factory) {

if (typeof define === "function" && define.amd) {

define([], factory);

} else if (typeof exports !== "undefined") {

factory();

} else {

var mod = {

exports: {}

};

factory();

global.FileSaver = mod.exports;

}

})(this, function () {

"use strict";

* FileSaver.js

* A saveAs() FileSaver implementation.

* By Eli Grey, http://eligrey.com

* License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)

* source : http://purl.eligrey.com/github/FileSaver.js

// The one and only way of getting global scope in all environments

// https://stackoverflow.com/q/3277182/1008999

var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;

function bom(blob, opts) {

if (typeof opts === 'undefined') opts = {

autoBom: false

};else if (typeof opts !== 'object') {

console.warn('Deprecated: Expected third argument to be a object');

opts = {

autoBom: !opts

};

} // prepend BOM for UTF-8 XML and text/* types (including HTML)

// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF

if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {

return new Blob([String.fromCharCode(0xFEFF), blob], {

type: blob.type

});

}

return blob;

}

function download(url, name, opts) {

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.responseType = 'blob';

xhr.onload = function () {

saveAs(xhr.response, name, opts);

};

xhr.onerror = function () {

console.error('could not download file');

};

xhr.send();

}

function corsEnabled(url) {

var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker

xhr.open('HEAD', url, false);

try {

xhr.send();

} catch (e) {}

return xhr.status >= 200 && xhr.status <= 299;

} // `a.click()` doesn't work for all browsers (#465)

function click(node) {

try {

node.dispatchEvent(new MouseEvent('click'));

} catch (e) {

var evt = document.createEvent('MouseEvents');

evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);

node.dispatchEvent(evt);

}

} // Detect WebView inside a native macOS app by ruling out all browsers

// We just need to check for 'Safari' because all other browsers (besides Firefox) include that too

// https://www.whatismybrowser.com/guides/the-latest-user-agent/macos

var isMacOSWebView = /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent);

var saveAs = _global.saveAs || ( // probably in some web worker

typeof window !== 'object' || window !== _global ? function saveAs() {}

/* noop */

// Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView

: 'download' in HTMLAnchorElement.prototype && !isMacOSWebView ? function saveAs(blob, name, opts) {

var URL = _global.URL || _global.webkitURL;

var a = document.createElement('a');

name = name || blob.name || 'download';

a.download = name;

a.rel = 'noopener'; // tabnabbing

// TODO: detect chrome extensions & packaged apps

// a.target = '_blank'

if (typeof blob === 'string') {

// Support regular links

a.href = blob;

if (a.origin !== location.origin) {

corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');

} else {

click(a);

}

} else {

// Support blobs

a.href = URL.createObjectURL(blob);

setTimeout(function () {

URL.revokeObjectURL(a.href);

}, 4E4); // 40s

setTimeout(function () {

click(a);

}, 0);

}

} // Use msSaveOrOpenBlob as a second approach

: 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {

name = name || blob.name || 'download';

if (typeof blob === 'string') {

if (corsEnabled(blob)) {

download(blob, name, opts);

} else {

var a = document.createElement('a');

a.href = blob;

a.target = '_blank';

setTimeout(function () {

click(a);

});

}

} else {

navigator.msSaveOrOpenBlob(bom(blob, opts), name);

}

} // Fallback to using FileReader and a popup

: function saveAs(blob, name, opts, popup) {

// Open a popup immediately do go around popup blocker

// Mostly only available on user interaction and the fileReader is async so...

popup = popup || open('', '_blank');

if (popup) {

popup.document.title = popup.document.body.innerText = 'downloading...';

}

if (typeof blob === 'string') return download(blob, name, opts);

var force = blob.type === 'application/octet-stream';

var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;

var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);

if ((isChromeIOS || force && isSafari || isMacOSWebView) && typeof FileReader !== 'undefined') {

// Safari doesn't allow downloading of blob URLs

var reader = new FileReader();

reader.onloadend = function () {

var url = reader.result;

url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');

if (popup) popup.location.href = url;else location = url;

popup = null; // reverse-tabnabbing #460

};

reader.readAsDataURL(blob);

} else {

var URL = _global.URL || _global.webkitURL;

var url = URL.createObjectURL(blob);

if (popup) popup.location = url;else location.href = url;

popup = null; // reverse-tabnabbing #460

setTimeout(function () {

URL.revokeObjectURL(url);

}, 4E4); // 40s

}

});

_global.saveAs = saveAs.saveAs = saveAs;

if (typeof module !== 'undefined') {

module.exports = saveAs;

}

});

Usage

Now to use this library in an actual web application we will be using html and javascript So just create a index.html file and inside this file we have a simple input field where the user can enter the url of the file to be downloaded and a button to trigger the action.

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FileSaver.js CDN Example in Browser</title>
</head>
<body>
    <h1>Download Files From URL in Javascript</h1>
    <label for="url">Enter the File URL:</label>
    <input id="url" type="url" required>
    <button id="download">Download File</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<script src="script.js"></script>
</html>

<!doctype html>

<html>

<head>

<title>FileSaver.js CDN Example in Browser</title>

</head>

<body>

<h1>Download Files From URL in Javascript</h1>

<label for="url">Enter the File URL:</label>

<button id="download">Download File</button>

</body>

</html>

Now we need to write the javascript code when we click the button what should happen

script.js

let button = document.querySelector('#download')
let input = document.querySelector('#url')
let url = ""

// event handler to the input field

input.addEventListener('change', (e) => {
    url = document.getElementById('url').value
})

button.addEventListener('click', downloadFile)

function downloadFile() {
    // download the file from the url in javascript

    saveAs(url, "image.jpg");
}

let button = document.querySelector('#download')

let input = document.querySelector('#url')

let url = ""

// event handler to the input field

input.addEventListener('change', (e) => {

url = document.getElementById('url').value

})

button.addEventListener('click', downloadFile)

function downloadFile() {

// download the file from the url in javascript

saveAs(url, "image.jpg");

}

Now if you click the button a png image file will be downloaded as an attachment as shown below in the picture. For this we are using the saveAs() method inside filesaver.js library as shown below