<template>
<div>
<button @click="save">导出</button>
<br/>
<br/>
<button @click="saveSjs">导出Sjs</button>
<br/>
<br/>
<input id="selectedFile" type="file" accept=".sjs" v-on:change="selectedFileChange($event)"/>
<button class="settingButton" id="open" v-on:click="importSjs">导入sjs</button>
<gc-spread-sheets style="height: 400px" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script setup>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import {saveAs} from 'file-saver';
import {ref} from "vue";
let selectedFile = []
let spreadObj;
const spreadRef = ref(null);
const initSpread = (spread) => {
spreadRef.value = spread;
spreadObj = spread;
let sheet1 = spread.getSheet(0);
sheet1.setValue(0, 0, 'Hello World!');
sheet1.setColumnCount(20);
spread.save(function (blob) {
saveAs(blob, 'export.sjs');
}, function () {
}, {
includeAutoMergedCells: false,
includeBindingSource: false,
includeCalcModelCache: false,
includeEmptyRegionCells: true,
includeFormulas: true,
includeStyles: true,
includeUnusedNames: true,
saveAsView: false,
});
}
function save() {
spreadRef.value.export(function (blob) {
saveAs(blob, 'export.xlsx');
}, function () {
}, {
includeAutoMergedCells: false,
includeBindingSource: false,
includeCalcModelCache: false,
includeEmptyRegionCells: true,
includeFormulas: true,
includeStyles: true,
includeUnusedNames: true,
saveAsView: false,
});
}
function saveSjs() {
spreadRef.value.save(function (blob) {
saveAs(blob, 'export.sjs');
}, function () {
}, {
includeAutoMergedCells: false,
includeBindingSource: false,
includeCalcModelCache: false,
includeEmptyRegionCells: true,
includeFormulas: true,
includeStyles: true,
includeUnusedNames: true,
saveAsView: false,
});
}
function selectedFileChange(e) {
selectedFile = e.target.files[0];
}
function importSjs() {
spreadObj.open(selectedFile, function () {
}, function () {
}, {
calcOnDemand: false,
dynamicReferences: true,
fullRecalc: false,
includeFormulas: true,
includeStyles: true,
includeUnusedStyles: true,
openMode: 0,
})
;
}
</script>
|
-
|