How to Export Ag-Grid to PDF Format in Angular 2?

问题

I'm working on AG-GRID in Angular 2. I have found that there is an option only to export the grid into Excel.

How can I export the grid into PDF?

回答1:

Exporting to pdf whilst keeping the styling is a pretty tricky task and there are a few options out there to do what you desire.

html2pdf: This converts the html to canvas then from canvas to an image and then from image to pdf. The problem is that this implementation tends to produce a low resolution image.
jsPdf: This library is a js implementation and therefore does not include the page styling. Styles have to be added separately using the jsPdf and it is a bit limited so recreating the quite complex design generated by AG_GRID would require a lot of work.
phantomjs: This is a headless bowser which Api provides screen capture capability. rastersize is an example of the implementation, this can be integrated into an app by creating a que for calls to phantomjs.

回答2:

You can print the grid data. Chrome gives you an option to save it as pdf. But, you might have other html elements in the page, which you probably don't want to be a part of the PDF (or, print). So:

Render the grid in a separate page (You can transfer the grid state object to a separate component to render exactly the same grid view (Sort, filter etc).
Call the grid function api.setDomLayout('print');
Call window.print().
Redirect him back to the previous page.

I have written an example code (Take it as an example only, tweak as per needs): https://stackblitz.com/edit/angular-ag-grid-pdf

You can play with the width to fill the page.

来源：https://stackoverflow.com/questions/46846593/how-to-export-ag-grid-to-pdf-format-in-angular-2

标签

angular

ag-grid