请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

IT-Weaver

初级会员

20

主题

76

帖子

238

积分

初级会员

积分
238
IT-Weaver
初级会员   /  发表于:2021-12-22 13:59  /   查看:3384  /  回复:12
1金币
本帖最后由 Derrick.Jiao 于 2022-1-6 10:16 编辑

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

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

image.png503761291.png

最佳答案

查看完整内容

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

12 个回复

倒序浏览
最佳答案
最佳答案
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-22 13:59:02
来自 13#
本帖最后由 Derrick.Jiao 于 2022-1-4 10:50 编辑
IT-Weaver 发表于 2021-12-24 10:00
这是toJSON的结果,导出PDF后,显示文件损坏。

问题已复现,这边需要做进一步调研,此贴新改为保留处理,有进展会在本帖更新(SJS-11374)
————————————————————————————————————————
经确认,这是因为表格区域内没有内容(不包括行头列头),因此导出pdf后会显示报错。因此,要想正常导出pdf请给表格区域内添加内容。
回复 使用道具 举报
IT-Weaver
初级会员   /  发表于:2021-12-22 14:00:40
2#
image.png473881225.png

这是控制台的报错信息。
回复 使用道具 举报
IT-Weaver
初级会员   /  发表于:2021-12-22 14:02:12
3#
  1. function exportCommand(){
  2.         let json = _this.spread.toJSON();
  3.         let jsonString = JSON.stringify(json);
  4.         let printSpread = new GC.Spread.Sheets.Workbook();
  5.         printSpread.fromJSON(JSON.parse(jsonString));

  6.         printSpread.savePDF(
  7.           function(blob) {   
  8.             // window.open(URL.createObjectURL(blob))        
  9.             FaverSaver.saveAs(blob,  'download_'+new Date().getTime()+'.pdf');
  10.           }, function(error) {
  11.             console.log(error);
  12.           }, {
  13.                                                 title: 'pdf'
  14.           }
  15.         );  
复制代码


这是部分代码。
回复 使用道具 举报
IT-Weaver
初级会员   /  发表于:2021-12-22 14:44:04
4#
发现打印也是报相同的错误。

  1. import '@grapecity/spread-sheets-resources-zh';
  2. GC.Spread.Common.CultureManager.culture("zh-cn");
  3. import '@grapecity/spread-sheets-vue'
  4. import GC from "@grapecity/spread-sheets";
  5. window.GC = GC;
  6. import '@grapecity/spread-sheets-print';
  7. import "@grapecity/spread-sheets-pdf";
  8. import FaverSaver from 'file-saver';
复制代码


这是头部引入信息。



  1.                         function printCommand(){
  2.                                 _this.spread.print();
  3.                         }
复制代码

打印是这么调的。



现在初始化spreadjs用的还是老的方法,基于div,然后
  1. this.spread = new GC.Spread.Sheets.Workbook(this.$refs[this.tableList], {sheetCount: 1});
复制代码

这个应该没有影响吧。
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-22 17:25:29
5#
IT-Weaver 发表于 2021-12-22 14:44
发现打印也是报相同的错误。

你好,从上面的报错以及提供的代码信息来看,似乎不是SpreadJS中的错误。我这边在12、13以及14版本中测试了大艺以及导出,均未复现该问题,建议你提供能复现问题的demo或者json这边做进一步调研。
回复 使用道具 举报
IT-Weaver
初级会员   /  发表于:2021-12-22 17:34:54
6#
Derrick.Jiao 发表于 2021-12-22 17:25
你好,从上面的报错以及提供的代码信息来看,似乎不是SpreadJS中的错误。我这边在12、13以及14版本中测试 ...

image.png912958068.png

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



回复 使用道具 举报
IT-Weaver
初级会员   /  发表于:2021-12-22 17:37:50
7#
Derrick.Jiao 发表于 2021-12-22 17:25
你好,从上面的报错以及提供的代码信息来看,似乎不是SpreadJS中的错误。我这边在12、13以及14版本中测试 ...

是这样的,在我本地的demo环境,也没有问题,但是在项目框架内,因为整合了阿里的乾坤的前端融合框架,会不会是跟qiankun有关系?
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-22 18:02:13
8#
IT-Weaver 发表于 2021-12-22 17:37
是这样的,在我本地的demo环境,也没有问题,但是在项目框架内,因为整合了阿里的乾坤的前端融合框架,会 ...

理论上根框架的使用上是没有关系的,这边也没有具体测试过乾坤这个框架,因此没有办法给出准确的解决方案。从上面的json上看似乎是一个正常的json。把这个json拿到本地测试是否有这个问题呢?
回复 使用道具 举报
IT-Weaver
初级会员   /  发表于:2021-12-23 15:02:57
9#
Derrick.Jiao 发表于 2021-12-22 18:02
理论上根框架的使用上是没有关系的,这边也没有具体测试过乾坤这个框架,因此没有办法给出准确的解决方案 ...

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

  1. import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
  2. import GC from '@grapecity/spread-sheets'
  3. import '@grapecity/spread-sheets-vue'
  4. import '@grapecity/spread-sheets-resources-zh'

  5. /**
  6. * 数字类型单元格
  7. * @param {*} length
  8. * @param {*} precision
  9. */

  10. import {isNull} from "../../util";

  11. let CZAMTCellType = function CZAMTCellType(_parent, columnInfo, length, precision, flag, MoneyUnits) {
  12.      this._parent=_parent;
  13.      this.columnInfo=columnInfo;
  14.      this.length = length;
  15.      this.precision = precision;
  16.      this.flag = flag;
  17.      this.MoneyUnits = MoneyUnits;
  18.      this.Init(length, precision, flag);
  19. }

  20. CZAMTCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();

  21. CZAMTCellType.prototype.deactivateEditor = async function (editorContext, context) {
  22.      let row = context.row;
  23.      let col = context.col;
  24.      let gridhelper = new GridHelper(this._parent.spread);
  25.      let curValue = gridhelper.GetCellValue(row, col);
  26. }

  27. CZAMTCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
  28.      style.hAlign = GcSpread.Sheets.HorizontalAlign.right;
  29.      if (value) {
  30.          value = Number(value);
  31.          if (!(typeof value === 'number' && !isNaN(value))) {
  32.              value = 0;
  33.          }
  34.          let textValue = (new Decimal(value).div(new Decimal(this.MoneyUnits))).toFixed(2);

  35.          if(textValue<0){//负数时,显示值改为整数,且颜色变红。
  36.              textValue = Math.abs(textValue);
  37.              style.foreColor = "red";
  38.          }
  39.          GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, this.format(textValue), x, y, w, h, style, options]);

  40.      } else {
  41.          value = 0;
  42.          GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, this.format(value), x, y, w, h, style, options]);
  43.      }
  44. };

  45. CZAMTCellType.prototype.Init = function (length, precision, flag) {
  46.      this.maxvalue = Math.pow(10, length - precision - 1)
  47.      if (this.maxvalue < 99999999999999) {
  48.          this.maxvalue -= 1
  49.      } else {
  50.          this.maxvalue = 99999999999999
  51.      }
  52.      if (flag) {
  53.          this.minValue = 0
  54.      } else {
  55.          this.minValue = 0 - this.maxvalue
  56.      }
  57. };

  58. CZAMTCellType.prototype.setEditorValue = function (editorContext, value) {
  59.     //  if (editorContext) {
  60.     //      const textArea = editorContext.children[0];
  61.     //      if (isNull(value)) {
  62.     //          textArea.value = 0;
  63.     //      } else {
  64.     //          if (typeof value === 'string') {
  65.     //              value = value.replace(',', '')
  66.     //          }
  67.     //          value = Number(value);
  68.     //          if (!(typeof value === 'number' && !isNaN(value))) {
  69.     //              textArea.value = 0;
  70.     //          } else {
  71.     //              let textValue = (new Decimal(value).div(new Decimal(this.MoneyUnits)));
  72.     //              textArea.value = textValue;
  73.     //          }
  74.     //      }
  75.     //  }

  76.      if (editorContext) {
  77.         // const textArea = editorContext.children[0]
  78.         const textArea = editorContext // .innerText
  79.         if (this.isNull(value)) {
  80.             textArea.innerText = 0
  81.         } else {
  82.             if (typeof value === 'string') {
  83.                 value = value.replace(',', '')
  84.             }
  85.             value = Number(value);
  86.             if (!(typeof value === 'number' && !isNaN(value))) {
  87.                 textArea.innerText = 0
  88.             } else {
  89.                 let textValue = new Decimal(value).div(new Decimal(this.MoneyUnits))
  90.                 textArea.innerText = textValue
  91.             }
  92.         }
  93.     }
  94. };

  95. CZAMTCellType.prototype.getEditorValue = function (editorContext) {
  96.      if (editorContext) {
  97.         //  const textArea = editorContext.children[0];
  98.          let editorValue = editorContext.innerText;
  99.          if (!isNull(editorValue)) {
  100.              editorValue = Number(this.delcommafy(editorValue));
  101.              if (!(typeof editorValue === 'number' && !isNaN(editorValue))) {
  102.                  return 0;
  103.              }
  104.              editorValue = new Decimal(editorValue).mul(new Decimal(this.MoneyUnits));
  105.              if (editorValue > this.maxvalue) {
  106.                  editorValue = this.maxvalue;
  107.              }
  108.              if (editorValue < this.minValue) {
  109.                  editorValue = this.minValue;
  110.              }
  111.              let index = editorValue.toString().indexOf(".");
  112.              if (index == -1) {
  113.                  return Number(editorValue);
  114.              } else {
  115.                  var result = editorValue.toString().substring(index + 1);
  116.                  if (2 < result.length) {
  117.                      editorValue = this.delcommafy(editorValue);
  118.                  }
  119.                  return Number(editorValue);
  120.              }
  121.          } else {
  122.              return 0;
  123.          }
  124.      }
  125. };

  126. CZAMTCellType.prototype.isNull = function (val) {
  127.      if (val) {
  128.          if (
  129.              val === "" ||
  130.              val === null ||
  131.              val === "null" ||
  132.              val === undefined ||
  133.              val === "undefined"
  134.          ) {
  135.              return true;
  136.          } else {
  137.              return false;
  138.          }
  139.      } else {
  140.          return true;
  141.      }
  142. };
  143. //格式化为千分位
  144. CZAMTCellType.prototype.format=function (num) {

  145.      return (num+'').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');

  146. }
  147. CZAMTCellType.prototype.delcommafy=function (num){
  148.      if((num+"").trim()==""){
  149.          return"";
  150.      }
  151.      num=num.replace(/,/gi,'');
  152.      return num;
  153. }
  154. window.CZAMTCellType = CZAMTCellType;
复制代码
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部