ui-grid pdf制作导出布局答案

【问题标题】：ui-grid pdfMake export layoutui-grid pdf制作导出布局
【发布时间】：2016-04-20 11:23:21
【问题描述】：

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

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

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

exporterPdfTableLayout: 'lightHorizontalLines'

'lightHorizontalLines' 是我想使用的 pdfMake 提供的标准布局。

我在 ui-grid 上找不到任何用于此目的的示例或任何其他文档。

有人可以帮忙解决我哪里出错了吗？

【问题讨论】：

标签： angular-ui-grid pdfmake

【解决方案1】：

看来

exporterPdfTableLayout:

在 ui-grid 中不起作用。我通过直接在 pdfMaker.js 文件中编辑“defaultLayout”来解决此问题

【讨论】：

在不查看历史记录的情况下，似乎有人不小心删除了这一行，或者因为它导致了错误而将其删除，但似乎它的 cmets 也会被删除。

【解决方案2】：

@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
      };

【讨论】：

【解决方案3】：

您可以使用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 建议)。

【讨论】：