ui-grid pdfMake导出布局

时间:2016-04-20 11:23:22

标签: angular-ui-grid pdfmake

我正在使用pdfMake从ui-grid导出,我正在尝试使用exportiPdfTableLayout设置表格的布局,如ui-grid文档中所述

  

pdfMake格式的tableLayout,控制网格线等。我们通常使用默认布局。   默认为null,表示没有布局

我正在尝试使用以下行设置布局:

exporterPdfTableLayout: 'lightHorizontalLines' 

'lightHorizo​​ntalLines'是我想要使用的pdfMake提供的标准版面。

为此目的,我找不到任何关于ui-grid的使用示例或任何其他文档。

有人可以帮助解决我的错误吗?

3 个答案:

答案 0 :(得分:1)

出现

exporterPdfTableLayout:

在ui-grid中不起作用。我通过直接在pdfMaker.js文件中编辑'defaultLayout'来修复此问题

答案 1 :(得分:1)

@Janbango也不要忘记更新ui-grid.js以将layout:grid.options.exporterPdfTableLayout包含到docDefinition中。

      var docDefinition = {
          pageOrientation: grid.options.exporterPdfOrientation,
          pageSize: grid.options.exporterPdfPageSize,
          content: [{
              style: 'tableStyle',
              table: {
                  headerRows: 1,
                  widths: headerWidths,
                  body: allData
              },
              layout: grid.options.exporterPdfTableLayout,
          }],
          styles: {
              tableStyle: grid.options.exporterPdfTableStyle,
              tableHeader: grid.options.exporterPdfTableHeaderStyle
          },
          defaultStyle: grid.options.exporterPdfDefaultStyle
      };

答案 2 :(得分:1)

您可以使用exporterPdfCustomFormatter设置布局,您必须像这样引用内容数组中的第一个对象:

docDefinition.content[0].layout = {
    hLineWidth: function(i, node) {
       return (i === 0 || i === node.table.body.length) ? 2 : 1;},
    vLineWidth: function(i, node) {
       return (i === 0 || i === node.table.widths.length) ? 2 : 1;},
    hLineColor: function(i, node) {
       return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';},
    vLineColor: function(i, node) {
        return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';}
}

或:

docDefinition.content[0].layout = 'lightHorizontalLines'

完整的属性设置如下所示:

 exporterPdfCustomFormatter: function (docDefinition) {
      docDefinition.content[0].layout = 'lightHorizontalLines'
      return docDefinition;
 }

您可以使用该模式设置任何布局属性。确保引用子属性(例如“布局”)。如果您尝试在内容级别设置属性,您将覆盖存储由ui-grid传入的正文对象的内容对象(您的表数据)(或者您可以设置所有内容属性,如上面的@Gary建议)。