Open the demo in new window can open the designer
Report Export And Import
In SpreadJS, you can export the ReportSheet to an external file, including Excel, JSON and SJS formats. You can also import an external file of these same file formats.
<template>
<div id="split-view" class="sample-tutorial">
<gc-spread-sheets-designer
class="sample-spreadsheets split-content"
v-if="showDesigner"
@designerInitialized="initDesigner"
:style="{ width: '100%' }"
/>
<gc-spread-sheets id="ss" class="sample-spreadsheets split-content" v-else @workbookInitialized="initSpread" />
<div v-if="!showDesigner" class="options-container split-panel">
<div class="option-block">
<input id="file-input" type="file" name="files[]" accept=".xlsx, .ssjson, .json, .sjs, .zip, .xlsm" class="hide" @change="openFile()" />
<div class="option-row input-box">
<label for="file-name">File Name</label>
<input type="text" id="file-name" value="" disabled />
</div>
<div class="option-row">
<input type="button" id="open-file" class="option-button" value="Open File" @click="uploadFile()" />
<div class="option-info">File Type: *.ssjson, *.sjs</div>
</div>
</div>
<div class="option-block">
<div class="option-row">
<input type="button" id="export-to-json" class="option-button" value="Export to JSON" @click="exportFile('ssjson')" />
</div>
<div class="option-row">
<input type="button" id="export-to-sjs" class="option-button" value="Export to SJS" @click="exportFile('sjs')" />
</div>
<div class="option-row">
<input type="button" id="export-to-excel" class="option-button" value="Export to Excel" @click="exportFile('xlsx')" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-reportsheet-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-formula-panel";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-designer-resources-en";
import "@mescius/spread-sheets-designer-vue";
import { ref, onMounted } from "vue";
import "$DEMOROOT$/spread/source/js/react_vue/license.js";
import { registerlic } from "$DEMOROOT$/spread/source/js/designer/react_vue/license.js";
registerlic(GC);
const FileType = {
SJS: 'sjs',
Excel: 'xlsx',
SSJson: 'ssjson'
};
const openOptions = {
openMode: GC.Spread.Sheets.OpenMode.normal,
fullRecalc: true
};
const showDesigner = top === window;
const spreadRef = ref(null);
const designerRef = ref(null);
async function initDesigner(designer) {
designerRef.value = designer;
await initSpread(designer.getWorkbook());
designer.refresh();
}
async function initSpread(spread) {
spreadRef.value = spread;
if (!showDesigner) {
initSplitView(spread);
}
spread.suspendPaint();
spread.setSheetCount(1);
const loadingTip = addLoadingTip();
const res = await fetch(
"$DEMOROOT$/en/sample/features/report-sheet/export-and-import/spread.json"
);
await spread.fromJSON(await res.json());
loadingTip.remove();
spread.resumePaint();
}
function addLoadingTip() {
const div = document.createElement("div");
div.style.position = "absolute";
div.style.inset = "0";
div.style.display = "flex";
div.style.alignItems = "center";
div.style.justifyContent = "center";
div.style.background = "white";
div.style.zIndex = "100";
div.textContent = "Loading data from server ...";
document.body.appendChild(div);
return div;
}
function uploadFile() {
var fileInput = document.getElementById("file-input");
fileInput.click();
}
function openFile(e) {
var spread = spreadRef.value;
var fileNameItem = document.getElementById("file-name");
var fileInput = document.getElementById("file-input");
fileNameItem.value = 'Loading file...';
var file = fileInput.files[0];
if (!file) {
alert("Upload a file first.");
return;
}
var fileType = getFileType(file);
var fileName = file.name;
if (fileType === FileType.SJS) {
spread.open(file, function() {
fileNameItem.value = fileName;
fileInput.value = '';
}, function() {}, openOptions);
} else {
spread.import(file, function() {
fileNameItem.value = fileName;
fileInput.value = '';
}, function() {}, openOptions);
}
}
function exportFile(fileType) {
var spread = spreadRef.value;
var fileName = 'export.' + fileType;
var options = getExportOptions(fileType);
if (fileType === FileType.SJS) {
spread.save(function(blob) { saveAs(blob, fileName); }, function() {}, options);
} else {
spread.export(function(blob) { saveAs(blob, fileName); }, function() {}, options);
}
}
function getFileType (file) {
if (!file) {
return;
}
var fileName = file.name;
var extensionName = fileName.substring(fileName.lastIndexOf(".") + 1);
if (extensionName === 'sjs') {
return FileType.SJS;
} else if (extensionName === 'xlsx' || extensionName === 'xlsm') {
return FileType.Excel;
} else if (extensionName === 'ssjson' || extensionName === 'json') {
return FileType.SSJson;
}
}
function getExportOptions(fileType) {
return {
fileType: GC.Spread.Sheets.FileType[fileType],
includeBindingSource: true,
saveAsView: true
};
}
function initSplitView(spread) {
var host = document.getElementById("split-view");
var content = host.getElementsByClassName("split-content")[0];
var panel = host.getElementsByClassName("split-panel")[0];
new SplitView({
host: host,
content: content,
panel: panel,
refreshContent: function() {
spread.refresh();
}
});
}
</script>
<style scoped>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
#app {
height: 100%;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
box-shadow: inset 0px 0 4px 0 rgba(0, 0, 0, 0.4);
}
.option-block {
background: #fff;
padding: 8px;
margin: 12px 0;
border-radius: 4px;
border: 1px dashed rgb(128, 155, 89);
box-shadow: 0px 0 6px 0 rgba(0, 0, 0, 0.1);
}
.option-block.toggle {
border: 1px dotted #f7a711;
}
.option-row {
font-size: 14px;
box-sizing: border-box;
padding: 4px 0;
}
.option-title {
font-weight: bold;
color: #656565;
}
.option-info {
font-size: 12px;
color: #919191;
margin-top: 6px;
font-weight: normal;
}
.option-info.valid {
color: rgb(128, 155, 89);
}
.option-info.toggle {
color: #f7a711;
}
.option-button {
width: 100%;
padding: 0;
line-height: 20px;
background: rgb(128, 155, 89);
color: #fff;
transition: 0.3s;
cursor: pointer;
outline: none;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
border: none;
}
.option-button:hover {
background: rgb(128, 155, 89);
color: #fff;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
}
.option-checkbox {
background: #fff;
border: 1px dashed #f7a711;
color: #f7a711;
padding: 2px 4px;
transition: 0.3s;
box-sizing: border-box;
cursor: pointer;
}
.option-checkbox.active {
color: #fff;
background: #f7a711;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.selection-box {
position: relative;
}
.selection-box > select {
text-align: left;
width: 100%;
height: 20px;
padding: 0;
line-height: 20px;
background: transparent;
border: none;
border-bottom: 2px solid #656565;
color: #656565;
transition: 0.3s;
cursor: pointer;
outline: none;
box-sizing: border-box;
}
.selection-box > select > option {
background: white;
}
.selection-box > select:focus {
border-bottom: 2px solid rgb(128, 155, 89);
color: rgb(128, 155, 89);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}
.selection-box > label {
position: absolute;
cursor: pointer;
font-size: 12px;
color: #fff;
background: #656565;
padding: 0 4px;
right: 0;
top: 6px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}
.input-box {
position: relative;
}
.input-box > input[type="text"] {
width: 100%;
background: transparent;
border: none;
color: #656565;
border-bottom: 2px solid #656565;
outline: none;
box-sizing: border-box;
transition: 0.3s;
}
.input-box > input[type="text"]:focus {
color: rgb(128, 155, 89);
border-bottom: 2px solid rgb(128, 155, 89);
}
.input-box > label {
cursor: pointer;
position: absolute;
right: 0;
top: 5px;
font-size: 12px;
color: #fff;
background: #656565;
padding: 0 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}
.options-container .split-panel-collapse {
box-sizing: border-box;
width: 30px;
height: 30px;
padding: 6px;
background: rgb(128, 155, 89);
overflow: hidden;
cursor: pointer;
border-radius: 4px;
margin-bottom: 10px;
transition: 0.3s;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.css">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="$DEMOROOT$/spread/source/splitView/SplitView.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
System.import("./src/app.js");
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets-designer-resources-en': 'npm:@mescius/spread-sheets-designer-resources-en/index.js',
'@mescius/spread-sheets-designer-vue': 'npm:@mescius/spread-sheets-designer-vue/index.js',
'@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js',
'@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-reportsheet-addon': 'npm:@mescius/spread-sheets-reportsheet-addon/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
