<template>
<div class="componentContainer gc-scrollbar-thin" >
<h3>打开服务器端Excel文件</h3>
<div>
<button @click="openExcel">打开</button>
<!-- <button @click="exportExcel">导出</button>
<button @click="printWorkbook">打印</button> -->
</div>
<div style="text-align: left; margin-top: 10px;">
<gc-spread-sheets
hostClass='spread-host'
@workbookInitialized = 'workbookInitialized($event)'>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</div>
</template>
<script>
import '@grapecity/spread-sheets-vue'
import ExcelIO from '@grapecity/spread-excelio'
export default {
methods: {
processFile(event) {
this.excelFile = event.target.files[0];
},
openExcel () {
debugger
var excelIO = new ExcelIO.IO();
console.log(excelIO);
// Download Excel file
var excelFilePath = 'public/test.xlsx';
var xhr = new XMLHttpRequest();
xhr.open('GET', excelFilePath, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// get binary data as a response
var blob = this.response;
// convert Excel to JSON
excelIO.open(blob, function (json) {
var workbookObj = json;
this.spread.fromJSON(workbookObj);
console.log(json);
}, function (e) {
// process error
alert(e.errorMessage);
}, {});
}
};
xhr.send();
},
workbookInitialized(spread) {
this.spread = spread;
spread.refresh();
},
}
}
</script>
<style scoped>
.componentContainer {
position: absolute;
padding: 10px;
left: 242px;
top: 0;
bottom: 20px;
right: 0px;
}
.spreadContainer {
padding: 10px;
box-shadow: 0 0 20px grey;
}
.spreadContainer{
position: absolute;
left: 0px;
right: 30px;
top: 260px;
bottom: 10px;
}
.spread-host {
width: 100%;
height: 720px;
border: 1px solid black;
}
</style>
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图