操作流程
1、在index.html中引入葡萄城脚本文件。
2、在test.vue中使用葡萄城。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="shortcut icon" type="image/ico" href="static/images/favicon.ico"/>
<title></title>
<link rel="stylesheet" type="text/css" href="./static/spread/gc.spread.sheets.excel2016colorful.css">
<script src='./static/spread/gc.spread.sheets.all.min.js' type='text/javascript'></script>
<script src='./static/spread/gc.spread.excelio.min.js' type='text/javascript'></script>
<style>
#app {
100%;
height: 100vh;
min- 1920px;
overflow-y: hidden;
overflow-x: auto;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
Test.vue
<template>
<el-button type="primary" @click="onExportClick">导出</el-button>
<div id="testReport" style="width : 1654px; height : 800px" class="spread-host"></div>
</template>
import pako from 'pako';
data() {
return {
fileType:'',
spreadData:'',
sheetMessage: ''
}
},
created() {
GC.Spread.Sheets.LicenseKey = new GC.Spread.Excel.IO().LicenseKey = this.licenseKey;
this.fileType = 'TEST';
this.loadData();
},
mounted() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testReport"));
this.initSpread(spread);
},
methods: {
onExportClick : function(){
// 导出
if(this.sheetMessage) {
this.spreadData= this.ungzipString(this.sheetMessage);
// 报表导出
var spread = new GC.Spread.Sheets.Workbook();
spread.fromJSON(this.spreadData,{ignoreFormula:true});
var sheet = spread.getActiveSheet()
var spreadJSON = spread.toJSON({ includeBindingSource: true });
var excelIO = new GC.Spread.Excel.IO();
let sheeetName = this.fileName
excelIO.save(JSON.stringify(spreadJSON), function(blob){
FileSaver.saveAs(blob, sheeetName)
})
} else {
this.$message.error('暂无数据');
}
},
initSpread(spread){
this.spread= spread;
spread.suspendPaint();
spread.resumePaint();
},
loadData () {
this.spreadData=''
let workbookData = data; // data后端返回的execl数据，具体内容以流形式
// 页面显示
this.fileName = workbookData.fileName;
this.dateBelongs = workbookData.fromDate;
this.sheetMessage = workbookData.workbook
let transferZip = ungzipString(workbookData.workbook);
this.spread.fromJSON(transferZip,{ignoreFormula:true})
},
ungzipString() {
if(!str){
return "";
}
try {
var restored = pako.ungzip(str, { to: "string" }); //解压
return JSON.parse(restored);
} catch (err) {
console.log(err);
}
return "";
}
},
beforeDestroy() {
this.spreadData=''
}