Nous cherchons des moyens de mettre en place un support pour cela dans une prochaine version.
Pour l'instant, SpreadJS peut uniquement importer l'ensemble du classeur Excel à l'aide du service Web ExcelIO. Pour obtenir le contenu d'une plage de cellules copiée dans SpreadJS, la meilleure suggestion consiste à utiliser ExcelIO pour importer ce classeur dans une instance SpreadJS masquée, puis utiliser ClipboardPasteUndoAction pour copier et coller la plage du SpreadJS masqué le visible.
Voici un exemple de code montrant comment utiliser le service Web ExcelIO pour importer un fichier Excel:
<!DOCTYPE html>
<html>
<head>
<title>Excel IO Sample</title>
<link type="text/css" href="./css/cobalt/jquery-wijmo.css" rel="stylesheet" />
<link type="text/css" href="./css/gcspread.sheets.8.40.20151.0.css" rel="stylesheet" />
<script type="text/javascript" src="./external/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./scripts/gcspread.sheets.all.8.40.20151.0.min.js"></script>
<script type="text/javascript">
$(function() {
//Initialize SpreadJS
new GcSpread.Sheets.Spread($("#ss").get(0), {sheetCount: 2});
//For Excel Import
$("#btn_Import").click(function() {
// SpreadJS Excel IO import service api.
var serverUrl = $("#serviceHost").val() + "/xsapi/import";
// Generate import api options
var formData = new FormData();
//Choose a file to import
var $importingFile = $("#loadExcel");
var theFile = $importingFile[0].files[0];
var accept = "application/json";
formData.append("file", theFile);
formData.append("ExcelOpenFlags", "NoFlagsSet");
formData.append("TextFileOpenFlags", "None");
formData.append("Password", "");
$.ajax({
//Server script to process data
url: serverUrl,
type: 'POST',
//Ajax events
success: function completeHandler(data, textStatus, jqXHR) {
var spread = $("#ss").data("spread");
spread.fromJSON(JSON.parse(jqXHR.responseText).spread);
},
error: function errorHandler(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false,
//Options to tell server return data with specified type
headers: {
"Accept": accept
}
});
});
//For Excel Export with Form Post.
$("#btn_Export").click(function() {
var spread = $("#ss").data("spread");
// SpreadJS Excel IO import service api.
var serverUrl = $("#serviceHost").val() + "/xsapi/export";
// Generate import api options
var optContentType = "application/json";
// Post the json from spreadjs.
var dataObj = {
"spread": spread.toJSON(),
"exportFileType": "xlsx",
"excel": {
"saveFlags": "NoFlagsSet",
"password": ""
},
};
var content = JSON.stringify(dataObj);
var formInnerHtml = '<input type="hidden" name="type" value="' + htmlSpecialCharsEntityEncode(optContentType) + '" />';
formInnerHtml += '<input type="hidden" name="data" value="' + htmlSpecialCharsEntityEncode(content) + '" />';
var $iframe = $("<iframe style='display: none' src='about:blank'></iframe>").appendTo("body");
$iframe.ready(function() {
var formDoc = getiframeDocument($iframe);
formDoc.write("<html><head></head><body><form method='Post' action='" + serverUrl + "'>" + formInnerHtml + "</form>dummy windows for postback</body></html>");
var $form = $(formDoc).find('form');
$form.submit();
});
});
});
//gets an iframes document in a cross browser compatible manner
function getiframeDocument($iframe) {
var iframeDoc = $iframe[0].contentWindow || $iframe[0].contentDocument;
if (iframeDoc.document) {
iframeDoc = iframeDoc.document;
}
return iframeDoc;
}
var htmlSpecialCharsRegEx = /[<>&\r\n"']/gm;
var htmlSpecialCharsPlaceHolders = {
'<': 'lt;',
'>': 'gt;',
'&': 'amp;',
'\r': "#13;",
'\n': "#10;",
'"': 'quot;',
"'": 'apos;' /*single quotes just to be safe*/
};
function htmlSpecialCharsEntityEncode(str) {
return str.replace(htmlSpecialCharsRegEx, function (match) {
return '&' + htmlSpecialCharsPlaceHolders[match];
});
}
</script>
</head>
<body>
<h2>SpreadJS Excel IO Sample</h2>
<div style="margin-bottom: 10px">
<label><b>Excel IO Service Host : </b></label>
<input id="serviceHost" value="http://localhost/ExcelIO" style="width: 500px" />
</div>
<div id="ss" style="width: 660px; height: 500px; border: 1px solid gray; float: left">
</div>
<div style="width: 30%; height: 500px; margin-left: 15px; float: left">
<fieldset style="margin-bottom: 15px; height: 45%">
<legend><b>Excel IO Import Options</b></legend>
<input type="file" id="loadExcel" accept=".xlsx, .xls, .csv, .txt" />
<input id="btn_Import" type="button" value="Import" />
</fieldset>
<fieldset style="margin-bottom: 15px; height: 45%">
<legend><b>Excel IO Export Options</b></legend>
<input id="btn_Export" type="button" value="Export" />
</fieldset>
</div>
</body>
</html>
lien: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#exceliocode.html
Voici un exemple de code montrant comment utiliser le ClipboardPasteUndoAction:
$(document).ready(function() {
//There are two buttons in html page with the id "cutPasteBtn" and "copyPasteBtn".
var spread = new GcSpread.Sheets.Spread($("#ss").get(0),{sheetCount:3});
var sheet = spread.getActiveSheet();
sheet.setValue(0, 0, 1, GcSpread.Sheets.SheetArea.viewport);
sheet.setValue(1, 0, 2, GcSpread.Sheets.SheetArea.viewport);
sheet.setFormula(2, 0, "=A1+A2", GcSpread.Sheets.SheetArea.viewport);
sheet.setValue(0, 1, 3, GcSpread.Sheets.SheetArea.viewport);
sheet.setValue(1, 1, 4, GcSpread.Sheets.SheetArea.viewport);
sheet.setFormula(2, 1, "=B1+B2", GcSpread.Sheets.SheetArea.viewport);
var fromRange = new GcSpread.Sheets.Range(0, 0, 3, 2);
var toRanges = [new GcSpread.Sheets.Range(4, 0, 3, 2)];
$("#cutPasteBtn").click(function() {
//Cut Paste Action
var clipboardCutPasteAction = new GcSpread.Sheets.UndoRedo.ClipboardPasteUndoAction(sheet, sheet, sheet, { fromRange: fromRange, pastedRanges: toRanges, isCutting: true, clipboardText: "" }, GcSpread.Sheets.ClipboardPasteOptions.Values);
clipboardCutPasteAction.execute(sheet);
});
$("#copyPasteBtn").click(function() {
//Copy Paste Action
var clipboardCopyPasteAction = new GcSpread.Sheets.UndoRedo.ClipboardPasteUndoAction(sheet, sheet, sheet, { fromRange: fromRange, pastedRanges: toRanges, isCutting: false, clipboardText: "" }, GcSpread.Sheets.ClipboardPasteOptions.Values);
clipboardCopyPasteAction.execute(sheet);
});
});
lien: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#sccopy.html
Cordialement,
GrapeCity Experts