Last active
January 15, 2020 10:15
-
-
Save yiskang/528be6a929687dc1c2aaf1669e645ef1 to your computer and use it in GitHub Desktop.
Demo how to download Forge OSS object with jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Forge OSS object download demo</title> | |
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta charset="utf-8"> | |
<!-- The Viewer CSS --> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<a id="download">Download</div> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script> | |
$(function() { | |
/** | |
* | |
* jquery.binarytransport.js | |
* | |
* @description. jQuery ajax transport for making binary data type requests. | |
* @version 1.0 | |
* @author Henry Algus <[email protected]> | |
* | |
*/ | |
// 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.withCredentials = (options.withCredentials === true); | |
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.addEventListener('readystatechange', 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(); | |
} | |
}; | |
} | |
}); | |
$('a#download').click(function(event) { | |
event.preventDefault(); | |
const filename = 'a0beb4c3-40c7-4ead-8a54-39bb2ac2d545.rvt'; | |
const settings = { | |
crossDomain: true, | |
url: 'https://developer.api.autodesk.com/oss/v2/buckets/wip.dm.prod/objects/' + filename, | |
method: 'GET', | |
dataType: 'binary', | |
responseType: 'arraybuffer', //!<<< change to arraybuffer. The deault values in the ajaxTransport above is blob | |
processData: false, | |
withCredentials: true, | |
headers: { | |
'Authorization': 'Bearer AccessToken', | |
'Content-Type': 'application/octet-stream' | |
} | |
}; | |
$.ajax(settings).done(function (arraybuffer, textStatus, jqXHR) { | |
const blob = new Blob([arraybuffer]); | |
console.log(blob ); | |
console.log(textStatus); | |
if( navigator.msSaveBlob ) | |
return navigator.msSaveBlob(blob, filename); | |
const url = URL.createObjectURL(blob); | |
const a = document.createElement('a'); | |
a.style = 'display: none'; | |
document.body.appendChild(a); | |
a.href = url; | |
a.download = filename; | |
a.click(); | |
URL.revokeObjectURL(url); | |
}) | |
.fail(function( jqXHR, textStatus, errorThrown ) { | |
console.error(jqXHR, textStatus, errorThrown); | |
}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment