打印预览、打印图片、下载图片

       如何在SpreadJS中实现打印预览、将某sheet页的指定区域的内容以图片的形式进行下载？不少客户存在这样的需求，SpreadJS在V12.2中暴露了BeforePrint接口，通过这个接口可以轻松实现打印预览、下载图片。
保存图片
     监听BeforePrint事件，获取打印图片，核心代码如下：

1. $("#saveImage").click(function () {
   
2.                 if (isPrinting) {
   
3.                     return;
   
4.                 }
   
5.                 spread.bind(GC.Spread.Sheets.Events.BeforePrint, function (s, e) {
   
6.                     var sheet = spread.getSheet(1);
   
7.                     console.log(sheet.printInfo())
   
8.                     var iframe = e.iframe;
   
9.                     var images = iframe.contentWindow.document.getElementsByTagName("img");
   
10.                     for (var i = 0; i < images.length; i++) {
    
11.                         var img = images[i];
    
12.                         console.log(img)
    
13.                         var canvas = document.createElement("canvas");
    
14.                         canvas.height = img.naturalHeight;
    
15.                         canvas.width = img.naturalWidth;
    
16.                         var ctx = canvas.getContext('2d');
    
17.                         ctx.fillStyle = "#FFF";
    
18.                         ctx.fillRect(0, 0, canvas.width, canvas.height);
    
19.                         ctx.drawImage(img, 0, 0) //, img.width, img.height);
    
20.                         canvas.toBlob(function (blob) {
    
21.                             saveAs(blob, "print.jpeg");
    
22.                         }, "image/jpeg", 1);
    
23.                     }
    
24.                     e.cancel = true;
    
25.                     setTimeout(function () {
    
26.                         isPrinting = false;
    
27.                         spread.unbind(GC.Spread.Sheets.Events.BeforePrint)
    
28.                     }, 10)
    
29.                 });
    
30.                 isPrinting = true;
    
31.                 spread.print();
    
32.             })

复制代码

打印预览：

1. $("#printPreview").click(function () {
   
2.                 var json = spread.toJSON();
   
3.                 var jsonStr = JSON.stringify(json);
   
4.                 var newSpread = new GC.Spread.Sheets.Workbook();
   
5.                 newSpread.fromJSON(JSON.parse(jsonStr));
   
6.                 newSpread.bind(GC.Spread.Sheets.Events.BeforePrint, function (s, e) {
   
7.                     var iframe = e.iframe;
   
8.                     $("#previewFrame").html(iframe.contentWindow.document.body.innerHTML)
   
9.                    //把得到的img存到list
   
10.                     //list.push(iframe.contentWindow.document.getElementsByTagName("img")[0].src)
    
11.                     e.cancel = true;
    
12.                     setTimeout(function () {
    
13.                         isPrinting = false;
    
14.                         newSpread.unbind(GC.Spread.Sheets.Events.BeforePrint)
    
15.                     }, 100)
    
16.                 });
    
17.                 $("#previewFrame").html("加载中！")
    
18.                 $("#previewContent").show()
    
19.                 isPrinting = true;
    
20.                //设置sheet的打印规则
    
21.                printSetting();
    
22.                setTimeout(function(){
    
23.                 newSpread.print()
    
24.                 },100)
    
25.             });

复制代码

完整Demo在附件当中，欢迎下载。