时间戳

首页 > 解决方案 > Angular - 仅打印 ag-Grid 数据

angular - Angular - 仅打印 ag-Grid 数据

问题描述

我正在尝试以角度为 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);
}

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

这里的页面也包含带有内容的网格数据。现在如何仅发送 ag-grid 进行打印。

标签： angularag-grid

解决方案

你的打印功能只能是这个

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

并使用这个 CSS：

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

来源：仅打印 <div id="printarea"></div>？

推荐阅读