找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容
发新帖

dexteryao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

126

主题

8941

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
13639

讲师达人悬赏达人元老葡萄SpreadJS 认证SpreadJS 高级认证微信认证勋章

最新发帖

SpreadJS 全家桶实践 - 在线Excel报表系统（三）

dexteryao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于：2020-8-31 23:23  /   查看：3598  /  回复：0
本帖最后由 dexteryao 于 2020-8-31 23:23 编辑

前两期
SpreadJS 全家桶实践 - 在线Excel报表系统（一）
SpreadJS 全家桶实践 - 在线Excel报表系统（二）
实现了报表设计和数据绑定，本期将继续实现页面设置和导出PDF功能

为了导出PDF分页符合预期，进行简单的页面设置
新建ribbon.print.js添加页面配置config，并且在designer.js中 initDesigner方法里配置

  2.     customerRibbon.buttonGroups.push(ribbonPrintConfig)
复制代码


ribbon.print.js内容

  2. var ribbonPrintConfig = {
  3.     "label": "页面布局",
  4.     "thumbnailClass": "ribbon-thumbnail-spreadsettings",
  5.     "commandGroup": {
  6.         "children": [
  7.             {
  8.                 "direction": "vertical",
  9.                 "commands": [
  10.                     {
  11.                         text: "打印分页预览线",
  12.                         type: "checkbox",
  13.                         commandName: "show_hide_print_line",
  14.                         execute: async (context) => {
  15.                             setTimeout(() => {
  16.                                 let sheet = context.Spread.getActiveSheet();
  17.                                 var isVisible = sheet.isPrintLineVisible();
  18.                                 sheet.isPrintLineVisible(!isVisible);
  19.                             }, 0)
  20.                         },
  21.                         getState: (context) => {
  22.                             let sheet = context.Spread.getActiveSheet();
  23.                             return sheet.isPrintLineVisible();
  24.                         }
  25.                     }
  26.                 ]
  27.             },
  28.             {
  29.                 "type": "separator"
  30.             },
  31.             {
  32.                 "direction": "vertical",
  33.                 "commands": [
  34.                     {
  35.                         iconClass: "ribbon-button-namemanager",
  36.                         text: "插入分页符",
  37.                         commandName: "insertPageBreak",
  38.                         execute: async (context) => {
  39.                             let sheet = context.Spread.getActiveSheet();
  40.                             sheet.setColumnPageBreak(sheet.getActiveColumnIndex(), true)
  41.                             sheet.setRowPageBreak(sheet.getActiveRowIndex(), true)
  42.                         }
  43.                     },
  44.                     {
  45.                         iconClass: "ribbon-button-namemanager",
  46.                         text: "删除分页符",
  47.                         commandName: "deletePageBreak",
  48.                         execute: async (context) => {
  49.                             let sheet = context.Spread.getActiveSheet();
  50.                             sheet.setColumnPageBreak(sheet.getActiveColumnIndex(), false)
  51.                             sheet.setRowPageBreak(sheet.getActiveRowIndex(), false)
  52.                         }
  53.                     },
  54.                     {
  55.                         iconClass: "ribbon-button-namemanager",
  56.                         text: "删除所有分页符",
  57.                         commandName: "deleteAllPageBreak",
  58.                         execute: async (context) => {
  59.                             let sheet = context.Spread.getActiveSheet();
  60.                             sheet.suspendPaint()
  61.                             for(var row = 0; row < sheet.getRowCount(); row++){
  62.                                 sheet.setRowPageBreak(row, false)
  63.                             }
  64.                             for(var col = 0; col < sheet.getColumnCount(); col++){
  65.                                 sheet.setColumnPageBreak(col, false)
  66.                             }
  67.                             sheet.resumePaint();
  68.                         }
  69.                     },
  70.                 ]
  71.             },
  72.             {
  73.                 "type": "separator"
  74.             },
  75.             {
  76.                 "direction": "vertical",
  77.                 "commands": [
  78.                     {
  79.                         iconClass: "ribbon-button-namemanager",
  80.                         text: "宽度",
  81.                     },
  82.                     {
  83.                         iconClass: "ribbon-button-namemanager",
  84.                         text: "高度",
  85.                     }
  86.                 ]
  87.             },
  88.             {
  89.                 "direction": "vertical",
  90.                 "commands": [
  91.                     {
  92.                         text: "自动",
  93.                         type: "combobox",
  94.                         commandName: "setFitPagesWide",
  95.                         dropdownList: [
  96.                             {
  97.                                 text: "自动",
  98.                                 value: "-1"
  99.                             },
  100.                             {
  101.                                 text: "1",
  102.                                 value: "1"
  103.                             },
  104.                             {
  105.                                 text: "2",
  106.                                 value: "2"
  107.                             }
  108.                         ],
  109.                         execute: async (context, selectValue) => {
  110.                             if (selectValue != null && selectValue != undefined) {
  111.                                 setTimeout(() => {
  112.                                     let sheet = context.Spread.getActiveSheet();
  113.                                     var printInfo = sheet.printInfo();
  114.                                     printInfo.fitPagesWide(parseInt(selectValue));
  115.                                     sheet.printInfo(printInfo)
  116.                                 }, 0);
  117.                             }
  118.                         },
  119.                         getState: (context) => {
  120.                             let sheet = context.Spread.getActiveSheet();
  121.                             var printInfo = sheet.printInfo()
  122.                             var value = printInfo.fitPagesWide();
  123.                             return value.toString();
  124.                         }

  126.                     },
  127.                     {
  128.                         text: "高度",
  129.                         type: "combobox",
  130.                         commandName: "setFitPagesTall",
  131.                         dropdownList: [
  132.                             {
  133.                                 text: "自动",
  134.                                 value: "-1"
  135.                             },
  136.                             {
  137.                                 text: "1",
  138.                                 value: "1"
  139.                             },
  140.                             {
  141.                                 text: "2",
  142.                                 value: "2"
  143.                             }
  144.                         ],
  145.                         execute: async (context, selectValue) => {
  146.                             if (selectValue != null && selectValue != undefined) {
  147.                                 setTimeout(() => {
  148.                                     let sheet = context.Spread.getActiveSheet();
  149.                                     var printInfo = sheet.printInfo();
  150.                                     printInfo.fitPagesTall(parseInt(selectValue));
  151.                                     sheet.printInfo(printInfo)
  152.                                 }, 0);
  153.                             }
  154.                         },
  155.                         getState: (context) => {
  156.                             let sheet = context.Spread.getActiveSheet();
  157.                             var printInfo = sheet.printInfo()
  158.                             var value = printInfo.fitPagesTall();
  159.                             return value.toString();
  160.                         }

  162.                     }
  163.                 ]
  164.             }
  165.         ]
  166.     }
  167. };
复制代码

添加导出PDF按钮和下拉选项，按钮样式为自定义图标
  1. {
  2.                 "commands": [
  3.                     {
  4.                         iconClass: "ribbon-button-pdf-font",
  5.                         bigButton: true,
  6.                         text: "PDF",
  7.                         commandName: "pdf0",
  8.                         execute: exportPDF,
  9.                     },
  10.                     {
  11.                         title: "PDF_List",
  12.                         type: "dropdown",
  13.                         commandName: "pdf_sub",
  14.                         subCommands: [
  15.                             {
  16.                                 text: "绑定数据导出",
  17.                                 iconClass: "ribbon-button-pdf-small",
  18.                                 commandName: "pdf2",
  19.                                 execute: async (context, selectValue) => {
  20.                                     await exportPDF(context, true);
  21.                                 }
  22.                             },
  23.                             {
  24.                                 text: "导出当前Sheet",
  25.                                 iconClass: "ribbon-button-pdf-small",
  26.                                 commandName: "pdf1",
  27.                                 execute: async (context, selectValue) => {
  28.                                     await exportPDF(context, false, true);
  29.                                 }
  30.                             },
  31.                             {
  32.                                 text: "绑定导出当前Sheet",
  33.                                 iconClass: "ribbon-button-pdf-small",
  34.                                 commandName: "pdf3",
  35.                                 execute: async (context, selectValue) => {
  36.                                     await exportPDF(context, true, true);
  37.                                 }
  38.                             }
  39.                         ]
  40.                     }
  41.                 ]
  42.             },
复制代码
根据点击不同按钮，exportPDF方法传递不同参数
  1. async function exportPDF(designer, isBinding, isActiveSheet) {
  2.     console.log(arguments)
  3.     var spread = designer.getWorkbook();
  4.     var spreadJSON = JSON.stringify(spread.toJSON());
  5.     var uploadData = gzipString(spreadJSON);
  6.     fetch("spread/getpdf", {
  7.         body: "data=" + encodeURIComponent(uploadData) + "&isBinding=" + !!isBinding + "&isActiveSheet=" + !!isActiveSheet,
  8.         headers: {
  9.             "content-type": "application/x-www-form-urlencoded"
  10.         },
  11.         method: "POST"
  12.     }).then(resp => resp.blob())
  13.         .then(blob => {
  14.             const url = window.URL.createObjectURL(blob);
  15.             window.open(url, "_blank")
  16.         })
  17. }
复制代码

服务端使用GCExcel 绑定数据，返回PDF，前端直接新tab 打开

  2.     /* 导出PDF，可选择单sheet导出或者绑定模拟数据后导出*/
  3.     @RequestMapping(value = "/getpdf", method = RequestMethod.POST)
  4.     public ResponseEntity<byte[]> getPDF(@RequestParam(value = "data", required = true) String data,
  5.                                          @RequestParam(value = "isBinding", required = false) boolean isBinding,
  6.                                          @RequestParam(value = "isActiveSheet", required = false) boolean isActiveSheet) {

  8.         String json = uncompress(data);
  9.         Workbook workbook = new Workbook();
  10.         List<com.grapecity.documents.excel.JsonError> errors = workbook.fromJson(json);
  11.         System.out.println(errors);

  13.         if (isBinding) {
  14.             bindingDataToWrokbook(workbook);
  15.         }

  17.         System.out.println(workbook.getActiveSheet().getUsedRange(EnumSet.of(UsedRangeType.Data, UsedRangeType.DataValidation)));

  19.         ByteArrayOutputStream out = new ByteArrayOutputStream();

  21.         if (isActiveSheet) {
  22.             IWorksheet sheet = workbook.getActiveSheet();
  23.             System.out.println(sheet.getVPageBreaks().getCount());
  24.             sheet.save(out, SaveFileFormat.Pdf);
  25.         } else {
  26.             workbook.save(out, SaveFileFormat.Pdf);
  27.         }
  28. //        System.out.print(workbook.toJson());

  30.         byte[] contents = out.toByteArray();

  32.         HttpHeaders headers = new HttpHeaders();
  33.         headers.setContentType(MediaType.APPLICATION_PDF);
  34.         // Here you have to set the actual filename of your pdf
  35.         String filename = "output.pdf";
  36.         headers.setContentDispositionFormData(filename, filename);
  37.         headers.setCacheControl("must-revalidate, post-check=0, pre-check=0");
  38.         ResponseEntity<byte[]> response = new ResponseEntity<>(contents, headers, HttpStatus.OK);
  39.         return response;
  40.     }
复制代码

更多内容请关注葡萄城技术社区

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部