SpreadJS导出图片

收藏

本帖最后由 Joestar.Xu 于 2024-4-8 09:25 编辑

部分用户在项目中，会遇到将当前spreadjs导出成图片的需求。但spreadjs目前并没有api可以直接导出成图片，本文借助spreadjs打印，实现导出图片的功能。
具体的实现原理如下：
step1: 初始化spread；

let spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'),{sheetCount:3})

复制代码

step2: 设置打印属性

let sheet = spread.getSheet(0)
let printInfo = sheet.printInfo() || new GC.Spread.Sheets.Print.PrintInfo()
//只有打印质量大于等于4时才会生成图片
printInfo.qualityFactor(5)
//需要将margin清除，否则导出图片会有空白图
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))

复制代码

step3: spread绑定BeforePrint事件

spread.bind(GC.Spread.Sheets.Events.BeforePrint,(s,e) => {
let iframe = e.iframe
let imgs = iframe.contentWindow.document.getElementsByTagName("img")
for(let i=0; i<imgs.length; i++){
let img = imgs[i]
let canvas = document.createElement("canvas")
canvas.height = img.naturalHeight
canvas.width = img.naturalWidth
let ctx = canvas.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0,0,canvas.width,canvas.height)
ctx.drawImage(img,0,0)
canvas.toBlob((blob) => {
saveAs(blob,'print'+i+'.jpeg')
})
e.cancel = true
}
})

复制代码

通过上述三个步骤，就可以将spreadjs导出成图片啦，使用时别忘了引入打印相关的资源包~
具体Demo示例见下方链接。

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

SpreadJS导出图片

0 个回复

浏览过的版块