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

问题描述

我正在学习本教程:

解决方案

您需要为页眉和页脚样式添加边距，在您的 gridOptions 中，尝试使用以下内容:

$scope.gridOptions = {...exporterPdfTableStyle: {margin: [20, 20, 20, 20]},...exporterPdfCustomFormatter: 函数 ( 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 };返回文档定义；},...

I am following this tutorial: http://ui-grid.info/docs/#/tutorial/206_exporting_data

I am using angularjs ui grid. But when I export grid to pdf, UI is not look good.Problem: Page number and Pdf title is too left, but grid is too right

I tried to search the solution online, but no luck. This is my grid options setting:

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")),
        };

解决方案

You need to add a margin to the header and footer styles, in your gridOptions, try with something like this:

$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 标题太靠左，但网格太右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！