Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/402.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Isn';有没有办法打印出完全适合A4纸张的ag网格尺寸?_Javascript_Html_Css_Angular_Ag Grid - Fatal编程技术网

Javascript Isn';有没有办法打印出完全适合A4纸张的ag网格尺寸?

Javascript Isn';有没有办法打印出完全适合A4纸张的ag网格尺寸?,javascript,html,css,angular,ag-grid,Javascript,Html,Css,Angular,Ag Grid,我有一个大的ag网格,如下所示 不知何故,我应该得到这个PDF导出,并能够打印(都是A4纸大小)。我已经审查了AG网格文档,在这里找到一些有用的东西,我在下面想到了 onBtPrinterFriendly() { var eGridDiv = document.querySelector('#myGrid'); eGridDiv.style.width = ''; eGridDiv.style.height = ''; this.gridApi.setDomL

我有一个大的ag网格,如下所示

不知何故,我应该得到这个PDF导出,并能够打印(都是A4纸大小)。我已经审查了AG网格文档,在这里找到一些有用的东西,我在下面想到了

 onBtPrinterFriendly() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '';
    eGridDiv.style.height = '';
    this.gridApi.setDomLayout('print');
    print();
  }
  onBtNormal() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '400px';
    eGridDiv.style.height = '200px';
    this.gridApi.setDomLayout(null);
  }
这两种方法可以更改网格大小以按所需格式打印。但我无法使网格对角线变小以适应纸张大小。它只是在网格的右侧进行裁剪,所以看起来像这样

不管它有多小,我只想把它完全放在A4纸上(垂直方向)。难道没有办法做到这一点吗?我也在考虑制作一个简单的HTML表格版本,没有边距和填充物,以适应纸张,但这将是太多的工作,所以寻找更好、更简单的方法,如果存在的话


Plunker示例:

使用网格API上的
sizeColumnsToFit
函数来拟合网格中的所有列,然后打印

onBtPrinterFriendly() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '';
    eGridDiv.style.height = '';
    this.gridApi.sizeColumnsToFit();
    this.gridApi.setDomLayout('print');
    print();
  }

.agGrid行的css中有一个很高的行高值,所以它们实际上不会自动返回到行。在您的案例中,这将导致大量省略号和更难阅读和打印的表格

在打印时(如果您在其他地方不需要它),您可以通过
defaultColDef
向所有单元格添加类,这将强制单元格获取至少2行数据。这样可以减少列的宽度

defaultColDef: {
        ....

        cellClass: 'cell-wrap-text',
       
        ....
}
。单元格换行文本{
空白:正常!重要;
行高:23px!重要;
}
使用该方法以及
sizeColumnsToFit()
setDomLayout('print')
方法将获得更好的结果


此外,如果您没有在agGrid上使用无限模式,您可以轻松地将行高度设置为固定值,或者通过API(基于该行单元格中的文本内容)以编程方式进行设置。

这是一个好方法。但它仍然会修剪网格的右侧。无论如何都不适合:/n它永远不会适合,因为您有太多的列。如果你试着把它印成肖像,它就不会剪边了。