找回密码
 立即注册

QQ登录

只需一步,快速开始

sssssss

金牌服务用户

138

主题

351

帖子

1213

积分

金牌服务用户

积分
1213
sssssss
金牌服务用户   /  发表于:2024-7-25 15:13  /   查看:2072  /  回复:18
1金币
在选中单元格内包含了背景图,在转换图片过程中会报错,代码如下

首先插入背景图:

var style = new GC.Spread.Sheets.Style();
style.backColor = "lightgreen";
style.backgroundImage = "https://cdn.grapecity.com.cn/online/%E7%AB%8B%E5%8D%B3%E4%B8%8B%E8%BD%BD_spjs.png";
sheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

然后截图

let oldPrintInfo = window.sheet.printInfo();
        let printInfo = new GC.Spread.Sheets.Print.PrintInfo()
        //打印质量大于4时才会生成图片
        printInfo.qualityFactor(5)
        printInfo.margin({
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            header: 0,
            footer: 0
        });
        printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
        printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
        printInfo.paperSize(new GC.Spread.Sheets.Print.PaperSize(GC.Spread.Sheets.Print.PaperKind.a3))
        printInfo.showBorder(false)
        printInfo.showGridLine(true)
        let selection = window.sheet.getSelections()[0]
        printInfo.rowStart(selection.row);
        printInfo.rowEnd(selection.row + selection.rowCount - 1);
        printInfo.columnStart(selection.col);
        printInfo.columnEnd(selection.col + selection.colCount - 1);
        printInfo.fitPagesTall(1);
        printInfo.fitPagesWide(1);

        window.sheet.printInfo(printInfo)
        window.spread.bind(GC.Spread.Sheets.Events.BeforePrint + ".screenshot", (s, e) => {
          console.log(s,e, 'sdfeefee')
            let iframe = e.iframe
            let imgs = iframe.contentWindow.document.getElementsByTagName("img")
            if (imgs && imgs.length) {
                let img = imgs[0]
                console.log(img)
                let canvas = document.createElement("canvas")
                canvas.height = img.naturalHeight
                canvas.width = img.naturalWidth
                let ctx = canvas.getContext('2d')
                ctx.fillRect(0, 0, canvas.width, canvas.height)
                ctx.drawImage(img, 0, 0)
                console.log( Math.floor(canvas.height / 800), ' Math.floor(canvas.height / 800)')
                for (let i = 0; i < Math.floor(canvas.height / 800); i++) {
                  ctx.font = '100px Arial';
                  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 水印颜色和透明度
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'middle';
                  ctx.translate(canvas.width / 10, canvas.height / 4);
                  // ctx.rotate(-Math.atan(canvas.height / canvas.width));
                  ctx.fillText('songyinglei', 0, 0);
                }
                canvas.toBlob((blob) => {
                    resolve(blob)
                    // navigator.clipboard.write([
                    //         new ClipboardItem({
                    //         [blob.type]: blob
                    //         })
                    //     ]);
                })
                e.cancel = true
                window.spread.unbind(GC.Spread.Sheets.Events.BeforePrint + ".screenshot")
                window.sheet.printInfo(oldPrintInfo)
            }
        })
        window.spread.print(window.spread.getActiveSheetIndex());

报错如下:
image.png753255309.png

最佳答案

查看完整内容

要改两个地方: 1.style中要加typeName,用于序列化反序列化 2.图片不能是连接,需要转成base64。 否则会有Failed to execute 'toDataURL' on 'HTMLCanvasElement'异常 原因是安全限制:如果画布上的数据源自不同的域,则会引发安全错误。确保画布上的内容不是跨域的图片或其他资源。是canvas的规定。

18 个回复

倒序浏览
最佳答案
最佳答案
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-7-25 15:13:06
来自 4#
要改两个地方:

1.style中要加typeName,用于序列化反序列化
2.图片不能是连接,需要转成base64。
否则会有Failed to execute 'toDataURL' on 'HTMLCanvasElement'异常
原因是安全限制:如果画布上的数据源自不同的域,则会引发安全错误。确保画布上的内容不是跨域的图片或其他资源。是canvas的规定。

exportPicture.html

8.78 KB, 下载次数: 193

回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于:2024-7-25 18:13:03
2#
您好,您问题中的”然后截图“是什么意思呢?
以及第二段代码是点击按钮后触发吗?


在SpreadJS中提供了上传图片,下载图片的功能。
学习链接是:
https://demo.grapecity.com.cn/sp ... /file-upload/purejs
支持文件,图片的上传,下载以及图片的预览功能
image.png290914916.png
回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2024-7-25 20:01:28
3#
本帖最后由 sssssss 于 2024-7-25 20:04 编辑
Ellia.Duan 发表于 2024-7-25 18:13
您好,您问题中的”然后截图“是什么意思呢?
以及第二段代码是点击按钮后触发吗?

是点击按钮截取选中区域,然后报错,现在我放的是单元格背景图,不是这个类型的图
我要实现的是这个功能:https://docs.grapecity.com.cn/sp ... t-of-selected-range

上面这个功能里,如果有单元格背景图会报错
回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2024-7-26 10:55:56
5#
Clark.Pan 发表于 2024-7-26 10:23
要改两个地方:

1.style中要加typeName,用于序列化反序列化

明白了,感谢
回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2024-7-26 11:02:08
6#
Clark.Pan 发表于 2024-7-25 15:13
要改两个地方:

1.style中要加typeName,用于序列化反序列化

请问如果这个图片有没有在打印的时候,提供转换时机,一定要在插入的时候是base64吗?我们之前已经插入的怎么处理
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-7-26 12:26:59
7#
这个没有,需要您自行转一下
回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2024-7-29 10:06:14
8#
Clark.Pan 发表于 2024-7-26 12:26
这个没有,需要您自行转一下

好的
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2024-7-29 10:23:36
9#
回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2024-8-15 10:15:18
10#
Clark.Pan 发表于 2024-7-26 12:26
这个没有,需要您自行转一下

请问一下,如果单元格有iconfont,显示不出来如何处理
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部