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

QQ登录

只需一步,快速开始

zhouwenchun

注册会员

6

主题

12

帖子

48

积分

注册会员

积分
48
最新发帖
zhouwenchun
注册会员   /  发表于:2019-5-21 20:43  /   查看:4342  /  回复:3


1.附件是我测试的excel,导入到页面,图片显示是正常的,我将excel中图片复制出来放到项目里,调用以下代码将图片放到页面上,图片尺寸明显不同,该如何写可以正常显示(像导入excel时图片显示的一样)
  1.     $("#sign").click(function() {
  2.                                         var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
  3.                                         var sheet = spread.getActiveSheet();
  4.                                         var spreadNS = GC.Spread.Sheets;
  5.                                         var SheetArea = spreadNS.SheetArea;
  6.                                         //获取可视化区域行数和列数
  7.                                         //                                        var rowcount = sheet.getRowCount();
  8.                                         //                                        var columncount = sheet.getColumnCount();
  9.                                         //遍历计算可视化区域宽高(px)
  10.                                         var width = 0,
  11.                                                 height = 0;
  12.                                         var sheet = spread.getSheet(0);
  13.                                         console.log('当前选中区域', sheet.getSelections());
  14.                                         var rowCount = sheet.getSelections()[0].row;
  15.                                         var colCount = sheet.getSelections()[0].col;
  16.                                         for(var i = 0; i < rowCount; i++) {
  17.                                                 height += sheet.getRowHeight(i, SheetArea.viewport);;
  18.                                         }
  19.                                         for(var i = 0; i < colCount; i++) {
  20.                                                 width += sheet.getColumnWidth(i, SheetArea.viewport);;
  21.                                         }
  22.                                         console.log("行数:", rowCount);
  23.                                         console.log("列数:", colCount);
  24.                                         console.log("宽:", width);
  25.                                         console.log("高", height);
  26.                                         var img = new Image();
  27.                                         img.src = "img/sign.png";
  28.                                         img.onload = function() {
  29.                                                 var imgwidth = img.naturalWidth;
  30.                                                 var imgheight = img.naturalHeight;
  31.                                                 var uid = uuid();
  32.                                                 sheet.pictures.add(uid, "img/sign.png", width, height, imgwidth, imgheight);
  33.                                         }
  34.                                 })
复制代码

2.我导出时,上面代码加的那个图片咋导不出来,代码如下
  1. $("#export").click(function() {
  2.                                         var excelIo = new GC.Spread.Excel.IO();
  3.                                         var fileName = "测试导出.xlsx";
  4.                                         var aa= GC.Spread.Sheets.findControl(document.getElementById('ss'));
  5.                                         var json = aa.toJSON();
  6.                                         // here is excel IO API
  7.                                         excelIo.save(json, function(blob) {
  8.                                                 saveAs(blob, fileName);
  9.                                         });
  10.                                 })
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

3 个回复

倒序浏览
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2019-5-22 17:08:19
沙发
您好,您的问题回答如下:

1、您在代码中调用了img的naturalWidth和naturalHeight,然而实际上在Excel和SpreadJS中,图片都是设置过尺寸的。
针对您的问题,您可以采用这样的思路:圈定一个区域,比如n行、m列,用代码设置图片尺寸,如图:

参考API:
https://demo.grapecity.com.cn/sp ... bjects.Picture.html

2、要将图片导出到Excel中,不能只添加"img/sign.png"这样的引用,而是把图片转为Base64编码传入add方法的第二个参数,见下列代码所示:
  1. var pic = "data:image/jpeg;base64,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";

  2. var spread = GC.Spread.Sheets.findControl("ss");
  3. var sheet = spread.getActiveSheet();
  4. sheet.pictures.add("f5", pic, 100, 100, 100, 100);
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
zhouwenchun
注册会员   /  发表于:2019-5-23 15:36:15
板凳
如果Excel和SpreadJS中图片都是设置过尺寸的,我的图片宽高应该设置成多少才能是Excel和SpreadJS中图片的尺寸呢
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2019-5-23 18:17:04
地板
您好,这个是根据您所需要的尺寸来定义的,用SpreadJS导入Excel时会拿到Excel中定义图片的尺寸,但是您用代码添加图片,就需要根据图片所需区域定义尺寸。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部