AngularJS ui-grid 导出为 pdf - 页码和 Pdf 标题太左，但网格太右

Question

我正在学习本教程：http://ui-grid.info/docs/#/tutorial/206_exporting_data

我正在使用 angularjs ui 网格。但是当我将网格导出为 pdf 时，UI 看起来不太好。问题：页码和 Pdf 标题太左，但网格太右

我尝试在线搜索解决方案，但没有成功。这是我的网格选项设置：

gridOptions = {
            showGridFooter: true,
            showFooter: false,
            enableSorting: true,
            multiSelect: false,
            enableFiltering: true,
            enableRowSelection: true,
            enableSelectAll: false,
            enableRowHeaderSelection: false,
            enableGridMenu: true,
            noUnselect: true,
            onRegisterApi: function (_gridApi) {
                this.gridApi = _gridApi;
            },
            data: [],
            exporterCsvFilename: 'Report.csv',
            exporterPdfDefaultStyle: {fontSize: 9},
            exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
            exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
            exporterPdfHeader: { text: "Foo", style: 'headerStyle' },
            exporterPdfFooter: function ( currentPage, pageCount ) {
                return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
            },
            exporterPdfCustomFormatter: function ( docDefinition ) {
                docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
                docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
                return docDefinition;
            },
            exporterPdfOrientation: 'portrait',
            exporterPdfPageSize: 'LETTER',
            exporterPdfMaxGridWidth: 500,
            exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        };

Answer 1

您需要在页眉和页脚样式中添加边距，在您的 gridOptions 中尝试这样的操作：

$scope.gridOptions = {
...
exporterPdfTableStyle: {margin: [20, 20, 20, 20]},
...
exporterPdfCustomFormatter: function ( docDefinition ) {
  docDefinition.styles.headerStyle = { margin: [30, 30, 30, 30],fontSize: 22, bold: true };
  docDefinition.styles.footerStyle = { margin: [30, 30, 30, 30],fontSize: 10, bold: true };
  return docDefinition;
},
...

AngularJS ui-grid 导出为 pdf - 页码和 Pdf 标题太左，但网格太右

AngularJS ui-grid export to pdf - Page number and Pdf title too left, but grid is too right

angularjs

angular-ui-grid