角度-仅打印农业网格数据

Question

我正在尝试对ag-Grid使用有角度的打印功能。我的页面包含内容和ag-Grid数据。不经意间，如果我应用打印功能，则内容和网格数据都将用于打印。但是我不确定如何仅提供ag-Grid数据进行打印。如果有人有想法请帮助我。预先感谢。

这是根据文档提供的打印功能的代码。

import { Component, ViewChild } from "@angular/core";
import "ag-grid-enterprise";

@Component({
  selector: "my-app",
  template: `


<button (click)="onBtPrint()">Print</button>

<h3>
    Latin Text
</h3>

<p>
    Lorem ipsum dolor sit amet, ne cum repudiare abhorreant. Atqui molestiae neglegentur ad nam, mei amet eros ea, populo deleniti scaevola et pri. Pro no ubique explicari, his reque nulla consequuntur in. His soleat doctus constituam te, sed at alterum repudiandae. Suas ludus electram te ius.
</p>

<ag-grid-angular
    #agGrid
    style="width: 600px; height: 200px;"
    id="myGrid"
    [rowData]="rowData"
    class="ag-theme-balham my-grid"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
    [enableSorting]="true"
    [animateRows]="true"
    [toolPanelSuppressSideButtons]="true"
    [groupUseEntireRow]="true"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

<h3>
    More Latin Text
</h3>

<p>
    Lorem ipsum dolor sit amet, ne cum repudiare abhorreant. Atqui molestiae neglegentur ad nam, mei amet eros ea, populo deleniti scaevola et pri. Pro no ubique explicari, his reque nulla consequuntur in. His soleat doctus constituam te, sed at alterum repudiandae. Suas ludus electram te ius.
</p>
`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  private rowData: any[];

  private columnDefs;
  private defaultColDef;
  private rowData;

  constructor() {
    this.columnDefs = [
      {
        field: "group",
        rowGroup: true,
        hide: true
      },
      {
        field: "id",
        pinned: "left",
        width: 60
      },
      {
        field: "model",
        width: 150
      },
      {
        field: "color",
        width: 100
      },
      {
        field: "price",
        valueFormatter: '"$" + value.toLocaleString()',
        width: 100
      },
      {
        field: "year",
        width: 100
      },
      {
        field: "country",
        width: 100
      }
    ];
    this.defaultColDef = {};
    this.rowData = createRowData();
  }

  onBtPrint() {
    var gridApi = this.gridApi;
    setPrinterFriendly(gridApi);
    setTimeout(function() {
      print();
      setNormal(gridApi);
    }, 2000);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    params.api.expandAll();
  }
}

var models = [
  "Mercedes-AMG C63",
  "BMW M2",
  "Audi TT Roadster",
  "Mazda MX-5",
  "BMW M3",
  "Porsche 718 Boxster",
  "Porsche 718 Cayman"
];
var colors = ["Red", "Black", "Green", "White", "Blue"];
var countries = ["UK", "Spain", "France", "Ireland", "USA"];
function createRowData() {
  var rowData = [];
  for (var i = 0; i < 200; i++) {
    var item = {
      id: i + 1,
      group: "Group " + (Math.floor(i / 20) + 1),
      model: models[Math.floor(Math.random() * models.length)],
      color: colors[Math.floor(Math.random() * colors.length)],
      country: countries[Math.floor(Math.random() * countries.length)],
      year: 2018 - Math.floor(Math.random() * 20),
      price: 20000 + Math.floor(Math.random() * 100) * 100
    };
    rowData.push(item);
  }
  return rowData;
}
function setPrinterFriendly(api) {
  var eGridDiv = document.querySelector(".my-grid");
  eGridDiv.style.width = "";
  eGridDiv.style.height = "";
  api.setDomLayout("print");
}
function setNormal(api) {
  var eGridDiv = document.querySelector(".my-grid");
  eGridDiv.style.width = "600px";
  eGridDiv.style.height = "200px";
  api.setDomLayout(null);
}

柱塞链接：https://plnkr.co/edit/mNPMkbNggdtRo1TMLPoT?p=preview

此页面还包含带有内容的网格数据。现在如何只发送ag-grid进行打印。

Answer 1

您的打印功能只能是这个

function setPrinterFriendly(api) {
    api.setDomLayout("print");
}

并使用以下CSS：

@media print {
  body * {
    visibility: hidden;
  }
  #myGrid, #myGrid * {
    visibility: visible;
  }
  #myGrid {
    position: absolute;
    left: 0;
    top: 0;
  }
}

来源：Print <div id="printarea"></div> only?