<template>
<div id="app">
<ejs-grid id="Grid"
:allowPdfExport="true"
:toolbar="toolbar"
:toolbarClick="clickHandler"
:dataSource="data"
:allowPaging="true"
ref="grid">
<e-columns>
...
</e-columns>
</ejs-grid>
</div>
</template>
<script>
...
export default {
name: "App",
data() {
...
methods: {
clickHandler: function(args) {
if (args.item.id === "pdfexport") {
var grid = document.getElementsByClassName("e-grid")[0]
.ej2_instances[0];
var doc = new PdfDocument();
doc.pageSettings.margins.all = 0;
doc.pageSettings.width = 700;
doc.pageSettings.pageMargins.topMargin = 40;
doc.pageSettings.pageMargins.rightMargin = 30;
doc.pageSettings.pageMargins.leftMargin = 30;
var page = doc.pages.add();
var pdfGrid = new PdfGrid();
var collength = grid.columns.length;
pdfGrid.columns.add(collength);
for (var i = 0; i < collength; i++) {
pdfGrid.columns.getColumn(i).width = parseInt(grid.columns[i].width);
}
pdfGrid.headers.add(1);
var pdfGridHeader = pdfGrid.headers.getHeader(0);
for (var j = 0; j < collength; j++) {
pdfGridHeader.cells.getCell(j).value = grid.columns[j].headerText;
}
var pdfGridRow1 = [];
for (var k = 0; k < grid.dataSource.length; k++) {
pdfGridRow1[k] = pdfGrid.gridRows.addRow();
}
for (let k = 0; k < grid.dataSource.length; k++) {
for (let r = 0; r < grid.columns.length; r++) {
pdfGridRow1[k].cells.getCell(r).value = grid.dataSource[k][
grid.columns[r].field
].toString();
}
}
pdfGrid.draw(page, 0, 0);
doc.save("output.pdf");
doc.destroy();
}
}
},
provide: {
grid: [Toolbar, PdfExport, Page]
}
};
</script>
... |