forked from sheetjs/docs.sheetjs.com
jQuery.ajax
This commit is contained in:
parent
3581f33075
commit
821130bed1
@ -289,6 +289,51 @@ function SheetJSFetchUL() {
|
||||
</details>
|
||||
|
||||
|
||||
### jQuery
|
||||
|
||||
`jQuery.ajax` (`$.ajax`) does not support binary data out of the box. A custom
|
||||
`ajaxTransport` can add required functionality. SheetJS users have reported
|
||||
success with `jquery.binarytransport.js`.
|
||||
|
||||
After including the main `jquery.js` and `jquery.binarytransport.js` scripts,
|
||||
`$.ajax` will support `dataType: "binary"` and `processData: false`.
|
||||
|
||||
_Download Files_
|
||||
|
||||
**[Live Download Demo](pathname:///jquery/index.html)**
|
||||
|
||||
In a GET request, the default behavior is to return a `Blob` object. Passing
|
||||
`responseType: "arraybuffer"` returns a proper `ArrayBuffer` object in IE10:
|
||||
|
||||
```js
|
||||
$.ajax({
|
||||
type: "GET", url: "https://sheetjs.com/pres.numbers",
|
||||
|
||||
/* suppress jQuery post-processing */
|
||||
// highlight-next-line
|
||||
processData: false,
|
||||
|
||||
/* use the binary transport */
|
||||
// highlight-next-line
|
||||
dataType: "binary",
|
||||
|
||||
/* pass an ArrayBuffer in the callback */
|
||||
// highlight-next-line
|
||||
responseType: "arraybuffer",
|
||||
|
||||
success: function (ab) {
|
||||
/* at this point, ab is an ArrayBuffer */
|
||||
// highlight-next-line
|
||||
var wb = XLSX.read(ab);
|
||||
|
||||
/* do something with workbook here */
|
||||
var ws = wb.Sheets[wb.SheetNames[0]];
|
||||
var html = XLSX.utils.sheet_to_html(ws);
|
||||
$("#out").html(html);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Wrapper Libraries
|
||||
|
||||
Before `fetch` shipped with browsers, there were various wrapper libraries to
|
||||
|
||||
59
docz/static/jquery/index.html
Normal file
59
docz/static/jquery/index.html
Normal file
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- sheetjs (C) 2013-present SheetJS https://sheetjs.com -->
|
||||
<!-- vim: set ts=2: -->
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="robots" content="noindex">
|
||||
<title>SheetJS jQuery Demo</title>
|
||||
<style>
|
||||
#drop {
|
||||
border: 2px dashed #bbb;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
font: 20pt bold, "Vollkorn";
|
||||
color: #bbb
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre>
|
||||
<b><a href="https://sheetjs.com">SheetJS jQuery Demo</a></b>
|
||||
<br />
|
||||
<button id="doit">Parse pres.numbers</button><br />
|
||||
<div id="out"></div>
|
||||
(view source to see the integration code)
|
||||
</pre>
|
||||
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
|
||||
<script src="jquery-3.6.4.min.js"></script>
|
||||
<script src="jquery.binarytransport.js"></script>
|
||||
<script>
|
||||
$("#doit").click(function () {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "https://sheetjs.com/pres.numbers",
|
||||
processData: false,
|
||||
dataType: "binary",
|
||||
responseType: "arraybuffer",
|
||||
success: function (ab) {
|
||||
/* at this point, ab is an ArrayBuffer */
|
||||
var wb = XLSX.read(ab);
|
||||
var ws = wb.Sheets[wb.SheetNames[0]];
|
||||
var html = XLSX.utils.sheet_to_html(ws);
|
||||
$("#out").html(html);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2
docz/static/jquery/jquery-3.6.4.min.js
vendored
Normal file
2
docz/static/jquery/jquery-3.6.4.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
52
docz/static/jquery/jquery.binarytransport.js
Normal file
52
docz/static/jquery/jquery.binarytransport.js
Normal file
@ -0,0 +1,52 @@
|
||||
/*! https://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ */
|
||||
/**
|
||||
*
|
||||
* 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();
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user