joekarma/binary-transport.js

## binary-transport.js
 /**
 *
 * jquery.binarytransport.js
 *
 * @description. jQuery ajax transport for making binary data type requests.
 * @version 1.0
 * @author Henry Algus <henryalgus@gmail.com>
 *
 */

// use this transport for "binary" data type
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){
    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob)))))
    {
        return {
            // create new XMLHttpRequest
            send: function(headers, callback){
		// setup all variables
                var xhr = new XMLHttpRequest(),
		url = options.url,
		type = options.type,
		async = options.async || true,
		// blob or arraybuffer. Default is blob
		dataType = options.responseType || "blob",
		data = options.data || null,
		username = options.username || null,
		password = options.password || null;

                xhr.addEventListener('load', function(){
			var data = {};
			data[options.dataType] = xhr.response;
			// make callback and send data
			callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                });

                xhr.open(type, url, async, username, password);

		// setup custom headers
		for (var i in headers ) {
			xhr.setRequestHeader(i, headers[i] );
		}

                xhr.responseType = dataType;
                xhr.send(data);
            },
            abort: function(){
                jqXHR.abort();
            }
        };
    }
});

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Download Zip File</title>
  <style>
    body {
      background-color: #white;
      text-align: center;
      margin: 2em;
    }

    a {
      color: beige;
      text-decoration: none;
      color: skyblue;
      font-family: Sunflower;
      text-align: center;
      font-size: 2em;
      line-height: 1.4em;
      text-decoration: underline;
    }

    a:hover {
      background-color: #444;
      text-decoration: none;
    }

    #loader {
      display: none;
    }

    .loading {
      color: silver;
      cursor: default;
      text-decoration: none;
      pointer-events: none;
    }

    .loading #loader {
      display: block;
      margin: 10px auto;
      vertical-align: middle;
      width: 1em; height: 1em;
      left: 0; top: 0;
    }
  </style>
  <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="binary-transport.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
  </head>
<body>
  <a href="javascript:void(0);" id="download-zip-file">Click here to download a zip file of DataBC's MHSU information <img id="loader" src="three-dots.svg" width="20" height="20"></a>
  <script src="script.js"></script>

</body>
</html>

## script.js
function downloadZipFileOfHealthServices() {
  var urls = [
    "https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/ff7254e9-2a60-467b-bc90-18b5b94e7aef/download/healthlinkbc-mhsu-health-services.csv",
    "https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/de425d68-a87f-44ce-ab4d-fcb514c04975/download/mental-health.csv",
    "https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/48901888-a10f-418b-9172-bee09ecd6725/download/mental-health.kml"
  ];

  downloadUrlsAsZip(createZipFileNameForHealthServices(), urls);
}

function createZipFileNameForHealthServices() {
  var d = new Date;

  return "mhsu_services_from_databc_" + moment().format("YYYYMMDD_HHmm") + ".zip"
}

function downloadUrlsAsZip(fileName, urls) {
  jQuery("#download-zip-file").addClass("loading");

  jQuery.when.apply(
    jQuery,
    urls.map(function(u) {
      var result = new jQuery.Deferred;
      var fileName = u.match(/\/([^\/]+)$/)[1];

      jQuery.ajax({
        url: u,
        type: "GET",
        dataType: "binary",
        processData: false,
        success: function(data) {
      	  result.resolve({"fileName" : fileName, "data" : data});
        }
      });


      return result;
    })
  ).then(
    function() {
      var zip = new JSZip();
      [].map.call(arguments, function(a) {
        zip.file(a.fileName, a.data);
      });
      zip.generateAsync({type:"blob"})
      .then(function(content) {
        jQuery("#download-zip-file").removeClass("loading");
        saveAs(content, fileName);
      });
    }
  );
}

jQuery("#download-zip-file").click(downloadZipFileOfHealthServices)

## three-dots.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              three-dots.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	/**
	*
	* jquery.binarytransport.js
	*
	* @description. jQuery ajax transport for making binary data type requests.
	* @version 1.0
	* @author Henry Algus <henryalgus@gmail.com>
	*
	*/

	// use this transport for "binary" data type
	$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){
	// check for conditions and support for blob / arraybuffer response type
	if (window.FormData && ((options.dataType && (options.dataType == 'binary')) \|\| (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) \|\| (window.Blob && options.data instanceof Blob)))))
	{
	return {
	// create new XMLHttpRequest
	send: function(headers, callback){
	// setup all variables
	var xhr = new XMLHttpRequest(),
	url = options.url,
	type = options.type,
	async = options.async \|\| true,
	// blob or arraybuffer. Default is blob
	dataType = options.responseType \|\| "blob",
	data = options.data \|\| null,
	username = options.username \|\| null,
	password = options.password \|\| null;

	xhr.addEventListener('load', function(){
	var data = {};
	data[options.dataType] = xhr.response;
	// make callback and send data
	callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
	});

	xhr.open(type, url, async, username, password);

	// setup custom headers
	for (var i in headers ) {
	xhr.setRequestHeader(i, headers[i] );
	}

	xhr.responseType = dataType;
	xhr.send(data);
	},
	abort: function(){
	jqXHR.abort();
	}
	};
	}
	});
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Download Zip File</title>
	<style>
	body {
	background-color: #white;
	text-align: center;
	margin: 2em;
	}

	a {
	color: beige;
	text-decoration: none;
	color: skyblue;
	font-family: Sunflower;
	text-align: center;
	font-size: 2em;
	line-height: 1.4em;
	text-decoration: underline;
	}

	a:hover {
	background-color: #444;
	text-decoration: none;
	}

	#loader {
	display: none;
	}

	.loading {
	color: silver;
	cursor: default;
	text-decoration: none;
	pointer-events: none;
	}

	.loading #loader {
	display: block;
	margin: 10px auto;
	vertical-align: middle;
	width: 1em; height: 1em;
	left: 0; top: 0;
	}
	</style>
	<link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="binary-transport.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
	</head>
	<body>
	<a href="javascript:void(0);" id="download-zip-file">Click here to download a zip file of DataBC's MHSU information <img id="loader" src="three-dots.svg" width="20" height="20"></a>
	<script src="script.js"></script>

	</body>
	</html>
	function downloadZipFileOfHealthServices() {
	var urls = [
	"https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/ff7254e9-2a60-467b-bc90-18b5b94e7aef/download/healthlinkbc-mhsu-health-services.csv",
	"https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/de425d68-a87f-44ce-ab4d-fcb514c04975/download/mental-health.csv",
	"https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/48901888-a10f-418b-9172-bee09ecd6725/download/mental-health.kml"
	];

	downloadUrlsAsZip(createZipFileNameForHealthServices(), urls);
	}

	function createZipFileNameForHealthServices() {
	var d = new Date;

	return "mhsu_services_from_databc_" + moment().format("YYYYMMDD_HHmm") + ".zip"
	}

	function downloadUrlsAsZip(fileName, urls) {
	jQuery("#download-zip-file").addClass("loading");

	jQuery.when.apply(
	jQuery,
	urls.map(function(u) {
	var result = new jQuery.Deferred;
	var fileName = u.match(/\/([^\/]+)$/)[1];

	jQuery.ajax({
	url: u,
	type: "GET",
	dataType: "binary",
	processData: false,
	success: function(data) {
	result.resolve({"fileName" : fileName, "data" : data});
	}
	});


	return result;
	})
	).then(
	function() {
	var zip = new JSZip();
	[].map.call(arguments, function(a) {
	zip.file(a.fileName, a.data);
	});
	zip.generateAsync({type:"blob"})
	.then(function(content) {
	jQuery("#download-zip-file").removeClass("loading");
	saveAs(content, fileName);
	});
	}
	);
	}

	jQuery("#download-zip-file").click(downloadZipFileOfHealthServices)