将ag网格表转换为vue js中的PDF文件
将ag网格表转换为vue js中的PDF文件
提问于 2020-12-28 22:51:53
我想将ag-grid表转换为pdf文件并导出。出于这个原因，我使用"jspdf“库。但现在我不能将ag表格内容放入我的pdf中。
这是我的ag-grid表部分。
<button @click="createPDF">Download PDF</button>
<div ref="content" id="pdfTable" >
<ag-grid-vue
ref="agGridTable"
:components="components"
:gridOptions="gridOptions"
class="ag-theme-material w-100 my-4 ag-grid-table"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="usersData"
rowSelection="multiple"
colResizeDefault="shift"
:animateRows="true"
:floatingFilter="true"
:pagination="true"
:paginationPageSize="paginationPageSize"
:suppressPaginationPanel="true"
:enableRtl="$vs.rtl">
</ag-grid-vue>
</div>在方法上:部分
createPDF (){
const doc = new jsPDF();
doc.html(this.$refs.content.innerHTML, {
callback: function (doc) {
doc.save('classroom report.pdf');
},
x: 10,
y: 10
});
},我可以使用jspdf打印静态文本，但不能打印ag-grid表格数据。另外，有没有其他简单的库可以用来将ag表导出为pdf格式？
回答 1
Stack Overflow用户
发布于 2021-04-07 19:30:29
pdfMake很好地集成了ag-Grid。
您可以利用ag-Grid API生成包含要导出的列和行的2D数组：
function getColumnsToExport() {
let columnsToExport = [];
agGridColumnApi.getAllDisplayedColumns().forEach(col => {
let pdfExportOptions = getPdfExportOptions(col.getColId());
if (pdfExportOptions && pdfExportOptions.skipColumn) {
return;
}
let headerCell = createHeaderCell(col);
columnsToExport.push(headerCell);
});
return columnsToExport;
}
function getRowsToExport(columnsToExport) {
let rowsToExport = [];
agGridApi.forEachNodeAfterFilterAndSort(node => {
if (PDF_SELECTED_ROWS_ONLY && !node.isSelected()) {
return;
}
let rowToExport = columnsToExport.map(({ colId }) => {
let cellValue = agGridApi.getValue(colId, node);
let tableCell = createTableCell(cellValue, colId);
return tableCell;
});
rowsToExport.push(rowToExport);
});
return rowsToExport;
}请参阅vue.js中的此示例：
https://stackblitz.com/edit/vue-ag-grid-pdf-make?file=index.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65479499
复制相关文章
相似问题
腾讯云开发者
