代码之家 › 专栏 › 技术社区 › FullStackDeveloper

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

angular-ui-grid angularjs

FullStackDeveloper · 技术社区 · 7 年前

http://ui-grid.info/docs/#/tutorial/206_exporting_data

问题:

我试图在网上搜索解决方案,但没有成功。这是我的网格选项设置:

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

1 回复 | 直到 7 年前

JoxieMedina 7 年前

您需要在页眉和页脚样式中添加边距 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;
},
...

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前