【V12.2.5】导出PDF Uncaught TypeError

Derrick.Jiao

本帖最后由 Derrick.Jiao 于 2022-1-6 10:16 编辑

看了一下，第一步 toJSON 是有一个对象结果的，但是第二步JSON.stringify(json);报错。在本地demo环境下没问题可以导出，但是上了项目就不行了。

查询了一下资料，说是json变量中有递归引用导致的，请问是否有解决方案？代码写法参照的咱们官方的例子。

image.png503761291.png

Derrick.Jiao · Derrick.Jiao

本帖最后由 Derrick.Jiao 于 2022-1-4 10:50 编辑

IT-Weaver 发表于 2021-12-24 10:00
这是toJSON的结果，导出PDF后，显示文件损坏。

问题已复现，这边需要做进一步调研，此贴新改为保留处理，有进展会在本帖更新（SJS-11374）
————————————————————————————————————————
经确认，这是因为表格区域内没有内容（不包括行头列头），因此导出pdf后会显示报错。因此，要想正常导出pdf请给表格区域内添加内容。

IT-Weaver · IT-Weaver

这是控制台的报错信息。

IT-Weaver · IT-Weaver

function exportCommand(){
let json = _this.spread.toJSON();
let jsonString = JSON.stringify(json);
let printSpread = new GC.Spread.Sheets.Workbook();
printSpread.fromJSON(JSON.parse(jsonString));
printSpread.savePDF(
function(blob) {
// window.open(URL.createObjectURL(blob))
FaverSaver.saveAs(blob, 'download_'+new Date().getTime()+'.pdf');
}, function(error) {
console.log(error);
}, {
title: 'pdf'
}
);

复制代码

这是部分代码。

IT-Weaver · IT-Weaver

发现打印也是报相同的错误。

import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import '@grapecity/spread-sheets-vue'
import GC from "@grapecity/spread-sheets";
window.GC = GC;
import '@grapecity/spread-sheets-print';
import "@grapecity/spread-sheets-pdf";
import FaverSaver from 'file-saver';

复制代码

这是头部引入信息。

function printCommand(){
_this.spread.print();
}

复制代码

打印是这么调的。

现在初始化spreadjs用的还是老的方法，基于div，然后

this.spread = new GC.Spread.Sheets.Workbook(this.$refs[this.tableList], {sheetCount: 1});

复制代码

这个应该没有影响吧。

Derrick.Jiao · Derrick.Jiao

IT-Weaver 发表于 2021-12-22 14:44
发现打印也是报相同的错误。

你好，从上面的报错以及提供的代码信息来看，似乎不是SpreadJS中的错误。我这边在12、13以及14版本中测试了大艺以及导出，均未复现该问题，建议你提供能复现问题的demo或者json这边做进一步调研。

IT-Weaver · IT-Weaver

Derrick.Jiao 发表于 2021-12-22 17:25
你好，从上面的报错以及提供的代码信息来看，似乎不是SpreadJS中的错误。我这边在12、13以及14版本中测试 ...

toJSON出来的就是这么个结构。

IT-Weaver · IT-Weaver

Derrick.Jiao 发表于 2021-12-22 17:25
你好，从上面的报错以及提供的代码信息来看，似乎不是SpreadJS中的错误。我这边在12、13以及14版本中测试 ...

是这样的，在我本地的demo环境，也没有问题，但是在项目框架内，因为整合了阿里的乾坤的前端融合框架，会不会是跟qiankun有关系？

Derrick.Jiao · Derrick.Jiao

IT-Weaver 发表于 2021-12-22 17:37
是这样的，在我本地的demo环境，也没有问题，但是在项目框架内，因为整合了阿里的乾坤的前端融合框架，会 ...

理论上根框架的使用上是没有关系的，这边也没有具体测试过乾坤这个框架，因此没有办法给出准确的解决方案。从上面的json上看似乎是一个正常的json。把这个json拿到本地测试是否有这个问题呢？

IT-Weaver · IT-Weaver

Derrick.Jiao 发表于 2021-12-22 18:02
理论上根框架的使用上是没有关系的，这边也没有具体测试过乾坤这个框架，因此没有办法给出准确的解决方案 ...

这个问题发现了一点端倪，是当给列设置了celltype之后，就会造成JSON.stringify报错。我把我们其中一个celltype贴出来。

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-vue'
import '@grapecity/spread-sheets-resources-zh'
/**
* 数字类型单元格
* @param {*} length
* @param {*} precision
*/
import {isNull} from "../../util";
let CZAMTCellType = function CZAMTCellType(_parent, columnInfo, length, precision, flag, MoneyUnits) {
this._parent=_parent;
this.columnInfo=columnInfo;
this.length = length;
this.precision = precision;
this.flag = flag;
this.MoneyUnits = MoneyUnits;
this.Init(length, precision, flag);
}
CZAMTCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
CZAMTCellType.prototype.deactivateEditor = async function (editorContext, context) {
let row = context.row;
let col = context.col;
let gridhelper = new GridHelper(this._parent.spread);
let curValue = gridhelper.GetCellValue(row, col);
}
CZAMTCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
style.hAlign = GcSpread.Sheets.HorizontalAlign.right;
if (value) {
value = Number(value);
if (!(typeof value === 'number' && !isNaN(value))) {
value = 0;
}
let textValue = (new Decimal(value).div(new Decimal(this.MoneyUnits))).toFixed(2);
if(textValue<0){//负数时，显示值改为整数，且颜色变红。
textValue = Math.abs(textValue);
style.foreColor = "red";
}
GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, this.format(textValue), x, y, w, h, style, options]);
} else {
value = 0;
GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, this.format(value), x, y, w, h, style, options]);
}
};
CZAMTCellType.prototype.Init = function (length, precision, flag) {
this.maxvalue = Math.pow(10, length - precision - 1)
if (this.maxvalue < 99999999999999) {
this.maxvalue -= 1
} else {
this.maxvalue = 99999999999999
}
if (flag) {
this.minValue = 0
} else {
this.minValue = 0 - this.maxvalue
}
};
CZAMTCellType.prototype.setEditorValue = function (editorContext, value) {
// if (editorContext) {
// const textArea = editorContext.children[0];
// if (isNull(value)) {
// textArea.value = 0;
// } else {
// if (typeof value === 'string') {
// value = value.replace(',', '')
// }
// value = Number(value);
// if (!(typeof value === 'number' && !isNaN(value))) {
// textArea.value = 0;
// } else {
// let textValue = (new Decimal(value).div(new Decimal(this.MoneyUnits)));
// textArea.value = textValue;
// }
// }
// }
if (editorContext) {
// const textArea = editorContext.children[0]
const textArea = editorContext // .innerText
if (this.isNull(value)) {
textArea.innerText = 0
} else {
if (typeof value === 'string') {
value = value.replace(',', '')
}
value = Number(value);
if (!(typeof value === 'number' && !isNaN(value))) {
textArea.innerText = 0
} else {
let textValue = new Decimal(value).div(new Decimal(this.MoneyUnits))
textArea.innerText = textValue
}
}
}
};
CZAMTCellType.prototype.getEditorValue = function (editorContext) {
if (editorContext) {
// const textArea = editorContext.children[0];
let editorValue = editorContext.innerText;
if (!isNull(editorValue)) {
editorValue = Number(this.delcommafy(editorValue));
if (!(typeof editorValue === 'number' && !isNaN(editorValue))) {
return 0;
}
editorValue = new Decimal(editorValue).mul(new Decimal(this.MoneyUnits));
if (editorValue > this.maxvalue) {
editorValue = this.maxvalue;
}
if (editorValue < this.minValue) {
editorValue = this.minValue;
}
let index = editorValue.toString().indexOf(".");
if (index == -1) {
return Number(editorValue);
} else {
var result = editorValue.toString().substring(index + 1);
if (2 < result.length) {
editorValue = this.delcommafy(editorValue);
}
return Number(editorValue);
}
} else {
return 0;
}
}
};
CZAMTCellType.prototype.isNull = function (val) {
if (val) {
if (
val === "" ||
val === null ||
val === "null" ||
val === undefined ||
val === "undefined"
) {
return true;
} else {
return false;
}
} else {
return true;
}
};
//格式化为千分位
CZAMTCellType.prototype.format=function (num) {
return (num+'').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
}
CZAMTCellType.prototype.delcommafy=function (num){
if((num+"").trim()==""){
return"";
}
num=num.replace(/,/gi,'');
return num;
}
window.CZAMTCellType = CZAMTCellType;

复制代码

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

[已处理] 【V12.2.5】导出PDF Uncaught TypeError

最佳答案

12 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证