Angular 角度-仅打印ag栅格数据

我尝试在angular中使用ag Grid的打印功能。包含内容和ag网格数据的我的页面。如果我随意应用打印功能，内容和网格数据都将用于打印。但我不知道如何只提供用于打印的ag网格数据。如果有人有主意，请帮助我。提前谢谢

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

从“@angular/core”导入{Component，ViewChild}；
引进“ag电网企业”；
@组成部分({
选择器：“我的应用程序”，
模板：`
印刷品
拉丁文本

《知识产权法》是一部令人憎恶的著作，其著作《不平等的法律》，其著作《公民权利法》和《公民权利法》，其著作《不可解释的权利》，其著作《宪法学》，在《共和国宪法》中被采用。

更多拉丁语文本

《知识产权法》是一部令人憎恶的著作，其著作《不平等的法律》，其著作《公民权利法》和《公民权利法》，其著作《不可解释的权利》，其著作《宪法学》，在《共和国宪法》中被采用。

`
})
导出类AppComponent{
私有网格API；
私有网格API；
私有行数据：任何[]；
私人专栏；
私人基金；
私有数据；
构造函数（）{
this.columnDefs=[
{
字段：“组”，
罗组：是的，
隐藏：真的
},
{
字段：“id”，
钉住：“左”，
宽度：60
},
{
字段：“模型”，
宽度：150
},
{
字段：“颜色”，
宽度：100
},
{
字段：“价格”，
valueFormatter:“$”+value.toLocaleString（）”，
宽度：100
},
{
字段：“年”，
宽度：100
},
{
字段：“国家”，
宽度：100
}
];
this.defaultColDef={}；
this.rowData=createRowData（）；
}
onBtPrint（）{
var gridApi=this.gridApi；
setPrinterFriendly（gridApi）；
setTimeout（函数（）{
打印（）；
setNormal（gridApi）；
}, 2000);
}
onGridReady（参数）{
this.gridApi=params.api；
this.gridColumnApi=params.columnApi；
params.api.expandAll（）；
}
}
风险值模型=[
“梅赛德斯AMG C63”，
“宝马M2”，
“奥迪TT跑车”，
“马自达MX-5”，
“宝马M3”，
“保时捷718 Boxster”，
“保时捷718 Cayman”
];
变量颜色=[“红”、“黑”、“绿”、“白”、“蓝”]；
var国家=[“英国”、“西班牙”、“法国”、“爱尔兰”、“美国”]；
函数createRowData（）{
var rowData=[]；
对于（变量i=0；i<200；i++）{
变量项={
id:i+1，
组：“组”+（数学层（i/20）+1），
model:models[Math.floor（Math.random（）*models.length）]，
颜色：颜色[Math.floor（Math.random（）*colors.length）]，
country:countries[Math.floor（Math.random（）*countries.length）]，
年份：2018年-数学地板（数学随机（）*20），
价格：20000+数学地板（数学随机（）*100）*100
};
rowData.push（项目）；
}
返回行数据；
}
函数setPrinterFriendly（api）{
var eGridDiv=document.querySelector（“.my grid”）；
eGridDiv.style.width=“”；
eGridDiv.style.height=“”；
api.setDomLayout（“打印”）；
}
函数setNormal（api）{
var eGridDiv=document.querySelector（“.my grid”）；
eGridDiv.style.width=“600px”；
eGridDiv.style.height=“200px”；
api.setDomLayout（空）；
}

您的打印功能只能是此功能

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

并使用以下CSS：

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

---

来源：

感谢您的回复。我在控制台中遇到了类似“error-TypeError:l.setDomLayout不是函数”的错误，你知道吗？在“I.set…”中“I”是什么？您需要像api.setDomLayout（“print”）之前一样执行此操作。我将为您的plnkr分叉，所以请检查它。plnkr中有工作版本，它正在工作，但我正在我的项目中尝试相同的功能，它给出了错误。这里使用版本“ag grid”：“^18.1.2”，“ag grid angular”：“^18.1.0”，“ag grid enterprise”：“^18.1.1”，无法确切地告诉您是什么，因为我没有您的代码，但可能与您的“i”有关，这不是ag grid的正确参考