在线编辑器导出问题

收藏

本帖最后由随机用户于 2021-3-29 13:43 编辑

<template>
<div class="com-pannel-wrp">
<button @click="getSpread">获取spread对象</button>
<div class="sheet-area" style="text-align: left;width:80vw;height:100vh;" id="hostDiv">
<gc-spread-sheets-designer :styleInfo='styleInfo' :config='config' @designerInitialized='designerInitialized'>
</gc-spread-sheets-designer>
</div>
</div>
</template>
<script>
/* eslint-disable */
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn';
import GC from '@grapecity/spread-sheets';
import * as Excel from "@grapecity/spread-excelio";
GC.Spread.Common.CultureManager.culture("zh-cn");
import '@grapecity/spread-sheets-resources-zh';
import { Designer } from '@grapecity/spread-sheets-designer-vue'
import FaverSaver from "file-saver";
GC.Spread.Sheets.Designer.LicenseKey = "";
export default {
name: 'demo', // 落货纸页面
props: {
excelFile: {
type: String,
default: "'https://minio.cnbabylon.com/public/luckysheet/money-manager-2.xlsx'",
}
},
data(){
return {
styleInfo: { height: "98vh", width: '100%' },
config: null,
designer: null,
commonQuery: {
type: undefined,
},
typeOptions:[],
spread: null,
}
},
created(){
let self = this;
console.log('created挂载文件：',self.excelFile)
},
methods: {
getSpread(){
let self = this;
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
let excelIo = new Excel.IO();
var workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();
let json = sheet.toJSON();
console.log(json,'sheet');
excelIo.save(json, function (blob) {console.log('blob',blob) }, function (e) {console.log(e);});
},
designerInitialized(designer) {
this.designer = designer;
window.designer = designer;
this.initWookbook(designer);
},
initWookbook(designer) {
let self = this;
let excelIo = new Excel.IO();
let excelFilePath = self.excelFile;
let xhr = new XMLHttpRequest();
xhr.open('GET', excelFilePath, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
console.log(this.response,'this.response')
excelIo.open(blob, function (json) {
var workbookObj = json;
self.spread = designer.getWorkbook().fromJSON(workbookObj);
}, function (e) {
console.log(e.errorMessage);
}, {});
}
};
xhr.send();
},
// 每列点击效果
btnEvent(method) {
const self = this;
self[method]();
},
// processFile (event) {
// this.excelFile = event.target.files[0];
// this.importExcel();
// },
exportExcel () {
var excelIO = new Excel.IO();
var json = this.spread.toJSON();
excelIO.save(
json,
function(blob) {
FaverSaver.saveAs(blob, "export.xlsx");
},
function(e) {
console.log(e);
}
);
},
printWorkbook (){
this.spread.print();
},
workbookInitialized(spread) {
this.spread = spread;
spread.refresh();
},
}
}
</script>
<style scoped>
.spread-host {
width: 84vw;
height: 800px;
border: 1px solid black;
}
.btn-group {
position: fixed;
z-index: 4;
width: 84vw;
}
.search-row {
margin: 2px 0;
background-color: #fff;
}
.sheet-area {
margin-top: 78px;
}
.com-pannel-wrp {
background-color: #fff;
}
</style>

复制代码

Derrick.Jiao · Derrick.Jiao

您好，出现这个报错是因为save方法应该传的是workbook的序列化对象而不是sheet的序列化对象，也就是let json = workbook.toJSON();
image.png14441222.png

随机用户 · 随机用户

DerrickJiao 发表于 2021-3-29 14:05
您好，出现这个报错是因为save方法应该传的是workbook的序列化对象而不是sheet的序列化对象，也就是let jso ...

导出一下是空白文件，这个如何解决？

随机用户 · 随机用户

DerrickJiao 发表于 2021-3-29 14:05
您好，出现这个报错是因为save方法应该传的是workbook的序列化对象而不是sheet的序列化对象，也就是let jso ...

let json = workbook.toJSON();
console.log(json,'sheet');
excelIo.save(json, function (blob) {console.log('blob',blob);FaverSaver.saveAs(blob, "export.xlsx");}, function (e) {console.log(e);});

复制代码

导出的时候下载出来是空白的

Derrick.Jiao · Derrick.Jiao

随机用户发表于 2021-3-29 14:17
导出的时候下载出来是空白的

下载空白是因为spread对象没获取对，参考下面的代码 image.png186984252.png

		自动登录	找回密码
密码			立即注册

[已处理] 在线编辑器导出问题

4 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证