找回密码
 立即注册

QQ登录

只需一步,快速开始

ztgis

金牌服务用户

7

主题

33

帖子

100

积分

金牌服务用户

积分
100
ztgis
金牌服务用户   /  发表于:2022-12-23 09:46  /   查看:2161  /  回复:12
1金币
需求为:从表格指定区域截图,再贴图方式加载到PDF上(因为PDF不可编辑)

现在遇到问题如下:
1. 表格宽高大概在710,1063 左右,用遍历单元格getColumnWidthgetRowHeight 方式获取累加得到。
2. 使用打印事件得到指定区域的图片,代码如下

  1.         // 打印图片
  2.         const imagePrintInfo = new GC.Spread.Sheets.Print.PrintInfo();
  3.         imagePrintInfo.qualityFactor(5);
  4.         imagePrintInfo.paperSize(new GC.Spread.Sheets.Print.PaperSize(GC.Spread.Sheets.Print.PaperKind.a4))
  5.         imagePrintInfo.centering(GC.Spread.Sheets.Print.PrintCentering.vertical);
  6.         imagePrintInfo.margin({ top: 0, bottom: 0, left: 0, right: 0, header: 0, footer: 0 });
  7.         imagePrintInfo.columnStart(range.lt.col);
  8.         imagePrintInfo.columnEnd(range.rb.col);
  9.         imagePrintInfo.rowStart(range.lt.row);
  10.         imagePrintInfo.rowEnd(range.rb.row);
  11.         acSheet.printInfo(imagePrintInfo)
  12.         workBook.print(sheetIndex)
复制代码

  1.         const iframe = e.iframe;
  2.         const images = iframe.contentWindow.document.getElementsByTagName('img');
  3.         const base64img = images[0].src
  4.         console.log('得到图片为', base64img);
  5.         currentSignInfo.seal64 = base64img
复制代码


3. 转成的图片的宽达到了3295像素

请问怎么能够把转出来的图片大小控制适配到PDF

12 个回复

正序浏览
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-12-30 17:59:52
13#
回复 使用道具 举报
ztgis
金牌服务用户   /  发表于:2022-12-30 16:51:49
12#
那我还是选第一种方案吧。
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-12-30 10:12:35
11#
照相机不支持直接导出图片,是显示在sheet中的,支持在导出pdf中显示。
您需要评估下该功能是否满足需求,如不满足,请参考上楼方案1,将导出的图片做后续处理。
回复 使用道具 举报
ztgis
金牌服务用户   /  发表于:2022-12-30 09:54:37
10#
照相机怎么导出成图片?
回复 使用道具 举报
ztgis
金牌服务用户   /  发表于:2022-12-29 15:48:18
8#
实现表格的套打目的
回复 使用道具 举报
ztgis
金牌服务用户   /  发表于:2022-12-29 15:47:44
7#
本帖最后由 ztgis 于 2022-12-29 15:49 编辑

需求是
1. 从选择的表格区域内提取图片,主要是文字和文字的位置
2. 将图片缩放成合适的大小,而且尽量保持文字的清晰度

实际情况
1. 提取出来的图片太大,宽度 3295 像素,
2. 通过CANVAS压缩提取出来的图片后,图片里的文字模糊


图片是要贴到PDF上的,实现套打
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-12-29 15:31:33
6#
这边注意到您此前提供的demo就是通过canvas转换导出的图片呀,这边只是修改了canvas的width值。
demo中是将图片进行了下载,您实际业务情况中是想实现什么样的需求呢?请详细描述下,以便问题的进一步调研。
回复 使用道具 举报
ztgis
金牌服务用户   /  发表于:2022-12-29 14:35:09
5#
您这个方法,通过图片重新绘制,图片的清晰度大幅下降,有没有不经过CAVAS转换的办法
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-12-23 17:15:14
4#
本帖最后由 Lynn.Dou 于 2022-12-23 17:17 编辑

这里图片的像素宽值是代码中设置的canvas width,根据需要将其修改为目标值即可。
示例代码:
  1. // 遍历获取列宽
  2. let colWidth = 0;
  3. let rc = sheet.getColumnCount();
  4. for(var i = 0; i < rc; i++) {
  5.      colWidth += sheet.getColumnWidth(i);
  6. }
  7. console.log("sheet表单宽度:" + colWidth)
复制代码
  1. ...
  2. // canvas.width = img.naturalWidth;
  3. // 修改canvas的width为colWidth
  4. canvas.width = colWidth;
  5. ...
复制代码
具体可参考附件demo

SPREAD导出图片测试.zip

8.62 KB, 下载次数: 103

回复 使用道具 举报
ztgis
金牌服务用户   /  发表于:2022-12-23 16:10:24
3#
选择如下,

image.png249221800.png

得到的图片是宽度 3295 像素的PNG图片

期望能够得到适配到PDF的PNG图片

SPREAD导出图片测试.zip

8.72 KB, 下载次数: 107

回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部