纯前端下载，自定义单元格的内容能否下载

登录

我结合这两个 demo 尝试下载，但是下下来的文件是空的

https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/customCellType
https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/ExcelIO

可以把下面的代码复制到 https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/ExcelIO 的 JavaScript 窗口，运行后下载试一下，可以发现下载的文件是空的。
试了把 https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/customHeaderCellType 这个 demo 的代码放到下载案例的窗口，下载后是有数据的，但是自定义的内容都没有了。像这个圆就没有了。这些内容是不能下载的吗？

var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
var excelIo = new GC.Spread.Excel.IO();
var sheet = spread.getActiveSheet();
document.getElementById('loadExcel').onclick = function () {
var excelFile = document.getElementById("fileDemo").files[0];
var password = document.getElementById('password').value;
// here is excel IO API
excelIo.open(excelFile, function (json) {
var workbookObj = json;
spread.fromJSON(workbookObj);
}, function (e) {
// process error
alert(e.errorMessage);
if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
document.getElementById('password').onselect = null;
}
}, {password: password});
};
document.getElementById('saveExcel').onclick = function () {
var fileName = document.getElementById('exportFileName').value;
var password = document.getElementById('password').value;
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
var json = spread.toJSON();
// here is excel IO API
excelIo.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
// process error
console.log(e);
}, {password: password});
};
};
//Custom Cell Type
function FivePointedStarCellType() {
this.size = 10;
}
FivePointedStarCellType.prototype = new spreadNS.CellTypes.Base();
FivePointedStarCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
if (!ctx) {
return;
}
ctx.save();
// draw inside the cell's boundary
ctx.rect(x, y, w, h);
ctx.clip();
ctx.beginPath();
if (value) {
ctx.fillStyle = "orange";
} else {
ctx.fillStyle = "gray";
}
var size = this.size;
var dx = x + w / 2;
var dy = y + h / 2;
ctx.beginPath();
var dig = Math.PI / 5 * 4;
ctx.moveTo(dx + Math.sin(0 * dig) * size, dy + Math.cos(0 * dig) * size);
for (var i = 1; i < 5; i++) {
ctx.lineTo(dx + Math.sin(i * dig) * size, dy + Math.cos(i * dig) * size);
}
ctx.closePath();
ctx.fill();
ctx.restore();
};
FivePointedStarCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
var xm = cellRect.x + cellRect.width / 2,
ym = cellRect.y + cellRect.height / 2,
size = 10;
var info = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea };
if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) {
info.isReservedLocation = true;
}
return info;
};
FivePointedStarCellType.prototype.processMouseUp = function (hitInfo) {
var sheet = hitInfo.sheet;
if (sheet && hitInfo.isReservedLocation) {
var row = hitInfo.row, col = hitInfo.col, sheetArea = hitInfo.sheetArea;
var newValue = !sheet.getValue(row, col, sheetArea);
var spread = sheet.getParent();
spread.commandManager().execute({cmd: "editCell", sheetName: sheet.name(), row: row, col: col, newValue: newValue});
return true;
}
return false;
};
function FullNameCellType() {
}
FullNameCellType.prototype = new spreadNS.CellTypes.Base();
FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
if (value) {
spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, options]);
}
};
FullNameCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
if (editorContext) {
editorContext.style.width=cellRect.width;
editorContext.style.height=100;
return {height: 100};
}
};
FullNameCellType.prototype.createEditorElement = function () {
var div = document.createElement("div");
div.setAttribute("gcUIElement", "gcEditingInput");
div.style.backgroundColor= "white";
div.style.overflow= "hidden";
var span1 = document.createElement('span');
span1.style.display = "block";
var span2 = document.createElement("span");
span2.style.display = "block";
var input1 = document.createElement("input");
var input2 = document.createElement("input");
var type = document.createAttribute('type');
type.nodeValue="text";
var clonedType = type.cloneNode(true);
input1.setAttributeNode(type);
input2.setAttributeNode(clonedType);
div.appendChild(span1);
div.appendChild(input1);
div.appendChild(span2);
div.appendChild(input2);
return div;
};
FullNameCellType.prototype.getEditorValue = function (editorContext) {
if (editorContext && editorContext.children.length === 4) {
var input1 = editorContext.children[1];
var firstName = input1.value;
var input2 = editorContext.children[3];
var lastName = input2.value;
return { firstName: firstName, lastName: lastName };
}
};
FullNameCellType.prototype.setEditorValue = function (editorContext, value) {
if (editorContext && editorContext.children.length === 4) {
var span1 = editorContext.children[0];
span1.innerHTML="First Name:";
var span2 = editorContext.children[2];
span2.innerHTML="Last Name:";
if (value) {
var input1 = editorContext.children[1];
input1.value=value.firstName;
var input2 = editorContext.children[3];
input2.value=value.lastName;
}
}
};
FullNameCellType.prototype.isReservedKey = function (e) {
//cell type handle tab key by itself
return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey);
};
FullNameCellType.prototype.isEditingValueChanged = function(oldValue, newValue) {
if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) {
return true;
}
return false;
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 170);
var columnInfo = [
{ name: "result", displayName: "Result", cellType: new FivePointedStarCellType(), size: 50 },
{ name: "person", displayName: "Person", cellType: new FullNameCellType(), size: 170 }
];
var source = [
{ result: true, person: {firstName:"LeBron",lastName:"James"}},
{ result: false, person: { firstName: "Chris", lastName: "Bosh" } },
{ result: true, person: { firstName: "Dwyane", lastName: "Wade" } },
{ result: false, person: { firstName: "Mike", lastName: "Miller" } },
{ result: true, person: { firstName: "Mike", lastName: "Miller" } },
{ result: true, person: { firstName: "Udonis", lastName: "Haslem" } },
{ result: true, person: { firstName: "Mario", lastName: "Chalmers" } },
{ result: true, person: { firstName: "Joel", lastName: "Anthony" } },
{ result: false, person: { firstName: "Shane", lastName: "Battier" } },
{ result: false, person: { firstName: "Ray", lastName: "Allen" } },
{ result: true, person: { firstName: "James", lastName: "Jones" } },
{ result: false, person: { firstName: "Rashard", lastName: "Lewis" } },
{ result: true, person: { firstName: "Norris", lastName: "Cole" } },
{ result: true, person: { firstName: "Chris", lastName: "Andersen" } },
{ result: false, person: { firstName: "Jarvis", lastName: "Varnado" } },
{ result: true, person: { firstName: "Juwan", lastName: "Howard" } },
];
sheet.setDataSource(source);
sheet.bindColumns(columnInfo);
sheet.resumePaint();
};

复制代码

KevinChen · KevinChen

您好，自定义单元格类型，以及其它自定义项，比如自定义公式、格式等，

都可以导出，但我需要给您解释一下。

首先，导出自定义元素请参考此示例：

https://demo.grapecity.com.cn/Sp ... customItemSerialize

自定义元素由于包含自定义代码逻辑，

要让自定义元素生效，导入时页面上必须有自定义元素的定义代码。

无法 · 无法

KevinChen 发表于 2019-5-28 09:09
您好，自定义单元格类型，以及其它自定义项，比如自定义公式、格式等，

都可以导出，但我需要给您解释一 ...

要让自定义元素生效，导入时页面上必须有自定义元素的定义代码

所以本地 excel 打开的话，就是没法显示自定义元素的吧？

KevinChen · KevinChen

对，自定义元素之所以是自定义的，就是本身SpreadJS和Excel都不支持，Excel是一个封闭的应用环境，当然也无法直接生成自定义逻辑。

无法 · 无法

KevinChen 发表于 2019-5-29 18:05
对，自定义元素之所以是自定义的，就是本身SpreadJS和Excel都不支持，Excel是一个封闭的应用环境，当然也无 ...

明白了，谢谢。

KevinChen · KevinChen

不客气，本帖结贴了，有新的问题欢迎发新贴交流

		自动登录	找回密码
密码			立即注册

[已处理] 纯前端下载，自定义单元格的内容能否下载

本帖子中包含更多资源

5 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章