下载Excel中的Backbone.js的 [英] Download Excel in Backbone.js
本文介绍了下载Excel中的Backbone.js的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
//下载SKU逻辑
downloadSku：功能（E）{
亦即preventDefault（）;
VAR checkedValues = $这个el.find。（CHK：检查）图（函数（）{。
返回THIS.VALUE;
}）。得到（）;
VAR的选择= {
成功：函数（模型，响应）{
的console.log（响应）;
VAR BLOB =新的Blob（[回应] {类型：应用程序/ vnd.ms-Excel的'}）; VAR downloadUrl = URL.createObjectURL（BLOB）;
变种一个= document.createElement方法（一）;
a.href = downloadUrl;
a.download =downloadFile.xlsx;
document.body.appendChild（一）;
a.click（）;
}
};
变种物镜= {};
OBJ [sku_ids] = checkedValues;
this.downloadSkuModel.set（OBJ，{验证：真}）;
this.downloadSkuModel.save（{}，期权）; }
services.js
VAR的服务= { 同步：函数（方法，模型，期权）{
VAR自我=这一点;
变种api_token = mainJs.get_api_token（）;
VAR的access_token;
如果（api_token == NULL）{
的access_token = api_token; }其他{
的access_token = api_token.access_token;
} 选择|| （选项= {}）; VAR beforeSend = options.beforeSend;
options.beforeSend =功能（XHR）{
xhr.setRequestHeader（'授权'，'承载'+的access_token）
如果（beforeSend）返回beforeSend.apply（这一点，参数）;
}; 开关（方法）{
案读：
options.url = options.readUrl;
打破;
案删除：
options.url = options.deleteUrl;
打破;
案更新：
options.url = options.updateUrl;
options.contentType ='应用/ JSON';
打破;
案创造：
options.url = options.createUrl;
options.contentType ='应用/ JSON';
打破;
} options.error =功能（XHR，statusTxt，抛出）{
开关（xhr.status）{
案例401：
的console.log（未经授权的错误）;
打破;
默认：
VAR MessageText中= JSON.parse（xhr.responseText）;;
的console.log（状态code：+ xhr.status +错误：+ messageText.message）;
} } 如果（options.url）
返回Backbone.sync.call（模型，方法，模型，期权）; }}
module.exports =服务;
我的响应头：
HTTP / 1.1 200 OK
服务器：Apache-狼/ 1.1
访问控制允许来源：*
的X内容类型选项：nosniff
的X XSS-保护：1;模式=块
缓存控制：无缓存，无存储，最大年龄= 0，必重新验证
编译：无缓存
过期：0
严格-运输和安全性：最大年龄= 31536000; includeSubDomains
X框选项：DENY
内容处置：附件;文件名= sku_list.xlsx
内容类型：应用程序/八位字节流，字符集= UTF-8
传输编码：分块
日期：星期二，2015年9月15日14点56分58秒GMT
我收到来自服务器的响应，但它不是在视图来了。
如果我在我看来，使用JavaScript它的工作原理：
VAR的obj = {};
OBJ [sku_ids] = checkedValues;
VAR XHR =新XMLHtt prequest（）;
xhr.open（'POST'，Urls.sku.download，真正的）;
xhr.responseType ='一滴'; xhr.setRequestHeader（授权，承载+somethign）;
xhr.setRequestHeader（内容类型，应用/ JSON的;字符集= utf-8'）;
xhr.onload =功能（E）{
如果（this.status == 200）{
VAR BLOB =新的Blob（[this.response] {类型：应用程序/ vnd.ms-Excel的'}）;
VAR downloadUrl = URL.createObjectURL（BLOB）;
变种一个= document.createElement方法（一）;
a.href = downloadUrl;
a.download =downloadSku.xlsx;
a.setAttribute（数据旁路，）;
document.body.appendChild（一）;
a.click（）;
}其他{
警报（无法下载Excel中。）
}
};
xhr.send（JSON.stringify（物镜））;
我与骨干正的错误是如下：
语法错误：意外标记p在Object.parse（本机）在K.parseJSON
解决方案
我解决我的问题：
这是我做的。
我改变了我的 options.dataType =文本作为默认骨干是假设它是一个JSON响应和在做一个 Object.parse
//Download SKU logic
downloadSku: function (e) {
e.preventDefault();
var checkedValues = this.$el.find('.chk:checked').map(function () {
return this.value;
}).get();
var options = {
success: function (model, response) {
console.log(response);
var blob = new Blob([response], { type: 'application/vnd.ms-excel' });
var downloadUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = downloadUrl;
a.download = "downloadFile.xlsx";
document.body.appendChild(a);
a.click();
}
};
var obj = {};
obj["sku_ids"] = checkedValues;
this.downloadSkuModel.set(obj, { validate: true });
this.downloadSkuModel.save({}, options);
}
services.js
var services = {
sync: function (method, model, options) {
var self = this;
var api_token = mainJs.get_api_token();
var access_token;
if (api_token == null) {
access_token = api_token;
} else {
access_token = api_token.access_token;
}
options || (options = {});
var beforeSend = options.beforeSend;
options.beforeSend = function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token)
if (beforeSend) return beforeSend.apply(this, arguments);
};
switch (method) {
case "read":
options.url = options.readUrl;
break;
case "delete":
options.url = options.deleteUrl;
break;
case "update":
options.url = options.updateUrl;
options.contentType = 'application/json';
break;
case "create":
options.url = options.createUrl;
options.contentType = 'application/json';
break;
}
options.error = function (xhr, statusTxt, thrown) {
switch (xhr.status) {
case 401:
console.log("Unauthorized error");
break;
default:
var messageText = JSON.parse(xhr.responseText);;
console.log("Status code: " + xhr.status + " Error: " + messageText.message);
}
}
if (options.url)
return Backbone.sync.call(model, method, model, options);
}
}
module.exports = services;
My response headers:
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: *
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
Strict-Transport-Security: max-age=31536000 ; includeSubDomains
X-Frame-Options: DENY
Content-Disposition: attachment;filename=sku_list.xlsx
Content-Type: application/octet-stream;charset=UTF-8
Transfer-Encoding: chunked
Date: Tue, 15 Sep 2015 14:56:58 GMT
I am getting a response from the server but it isn't coming on the View.
If i use Javascript in my view it works:
var obj = {};
obj["sku_ids"] = checkedValues;
var xhr = new XMLHttpRequest();
xhr.open('POST', Urls.sku.download, true);
xhr.responseType = 'blob';
xhr.setRequestHeader("Authorization", "Bearer " + "somethign");
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.onload = function (e) {
if (this.status == 200) {
var blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });
var downloadUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = downloadUrl;
a.download = "downloadSku.xlsx";
a.setAttribute("data-bypass", "");
document.body.appendChild(a);
a.click();
} else {
alert('Unable to download excel.')
}
};
xhr.send(JSON.stringify(obj));
The error i am getting with backbone is as below:
SyntaxError: Unexpected token P at Object.parse (native) at K.parseJSON
解决方案
I solved my issue:
This is what i did
I changed my options.dataType = 'text' as by default backbone was assuming it to be a json response and was doing a Object.parse
这篇关于下载Excel中的Backbone.js的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
