The original link: www.telerik.com/blogs/gener…

In this third post in the React series on PDF generation, we’ll learn how to export content and data in advanced UI components such as data grids and tree lists.

Welcome to the React Generation PDF blog series!

  • In Part 1, Generating PDFS in React: As simple as 1-2-3, we covered the basics of generating PDFS in React, including some basic HTML elements, and learned the fastest way to generate PDFS from HTML in React.
  • In Part 2, generating PDF from HTML in React Demo: Exporting Invoices, we focused on a common scenario: exporting an invoice created using HTML and CSS and using React to export its contents as a PDF. The article also showed how we included custom fonts with unique symbols and how we controlled the paper size of the generated PDF files using ONLY CSS.

Now we’ll take a closer look at how to export HTML and CSS to PDF using React. Specifically, we’ll see an example of exporting advanced React UI components (such as KendoReact Data Grid and React TreeList) and all their contents to a PDF file. Both React components have PDF exports built in, making them as easy as clicking a button.

For the data grid, we will also complete the step of adding paging with local data. This is to see how the available configuration options for generating PDF files determine whether we export only the current view or all the data available to the data table. In addition, we can configure whether to export only the currently displayed data, all data bound to the component (including data on the server), and even change the appearance of the PDF file when it is generated.

Set up our React data grid

Install the KendoReact grid

Before we begin, I strongly recommend that you check out the KendoReact Grid Getting started page, which contains installation instructions and links to some useful additional documentation articles that will help you understand React Data Grid.

Everything below assumes that we have already set up an existing React project. Specifically, one uses the Create React app.

The first step is to install the correct NPM package, which we can do by copying and pasting the NPM install command from the article we just linked to.

npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-data-tools @progress/kendo-react-inputs @progress/kendo-react-intl @progress/ kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-animation @progress/kendo-licensing
Copy the code

We also need to install the themes we want to use in our application. KendoReact supports three Design languages — Kendo UI default themes, Bootstrap, or Material Design. In all of the examples below, we’ll use the Material theme, but the Styles and Themes overview page contains instructions on how to install your favorite theme.

As mentioned earlier, we will use the Material theme, so let’s install that as well.

npm install --save @progress/kendo-theme-material
Copy the code

Note: If you have not used KendoReact before, you should also follow the license key activation steps highlighted in this article.

After completing the installation steps, we can add the appropriate import statements to the React application. In our app.js, we can add the following:

As we can see, we have now imported the Material Design theme and the appropriate grid-specific projects that we need.

Add data and define grids

The React Data Grid can be easily bound to almost any type of object, and to keep things simple, we’ll just use a simple array of objects. Once we know the fields available on the object, we can define the
component in the Grid declaration and use the field attribute to link the columns to the appropriate fields.

To make it easy for everyone to reference, here’s a StackBlitz project, We added sample data to it to be imported with -grid-sampleproducts.jsx as – and then defined a React Grid with a set of column sub-GridSampleProducts.

Add paging

Paging as a concept allows users to receive data-intensive components, such as React data tables, in smaller block sizes rather than huge lists of data items with huge scroll bars. Paging has several other benefits, including performance, because less data needs to be displayed at once.

Today’s pagination will help show how we can customize the content of the PDF generated in the grid. Specifically, do we want to export only data items for the current page, or do we want to export all data that can be found on all pages of the data grid? In our example, all data will be immediately available to the grid, which can even poll the server to get all available data and generate PDF files. So this is a very powerful feature that works right out of the box.

To best understand paging, the Kendall React Data Grid paging documentation article provides in-depth information and examples on how to implement paging.

To build the StackBlitz example we linked to above, we need to import an extra NPM package that we originally installed and import some extra parts from React to make sure we can start using hooks. So, in our app.js, we can add:

For those who are interested, the @Progress/Kendo-data-Query package is a helper library that KendoReact provides to transform data in a format that KendoReact data grids can easily use to help with paging, sorting, filtering, grouping, and more. Having it as a separate package provides some separation of concerns and helps the React table to have super high performance because much of the processing takes place in the data query library.

Now, to understand paging, you need to consider a few concepts. First, paging large data sets can be done with just a few variables:

  • The data array
  • The total number of items displayed on a page – this is called the page size, ortake(” Extracting so many data items from our data “)
  • Our current position in the data array — this helps us keep track of which page we are on; Also calledskipBecause we can calculate how many data items we need to skip (if we know the current page and page size)

Once we remember this, we also need to define a state for the grid based on this information. To bring these concepts into the code and into our app.js:

With this configuration, we now say we want to take five data items, and we skip the zero items, which means we count from 0 to 5.

Now some initial magic from the data query library. If we want to take an array and convert it into something our data grid can use for paging, we simply call the process() function:

It’s that simple!

Now, with the data at hand, we can update our Grid to get the data from our processingData variable and set the Pageable property to let the Grid know that we want to display the pager at the bottom of the Grid.

We do not need to write pageable={true} exactly as the default value when this prop is defined as true. In addition, we can bind our SKIP and take variables, which are used to display “X-y of Z” data items at the bottom of the pager. Math is all automated. We have these variables in our variables, dataState so we can use JS extension operators to apply these properties to our Grid configuration instead of manually entering them (a bit time saving)!

The final project to cover is the onDataStateChange event, which is triggered when any data changes in the React data grid. For us, this means paging, but it also triggers sorting, grouping, filtering, and so on. Here’s what we can use for this event:

In this case, we define a callback that takes event parameters containing take and SKIP variables to indicate where we are in the data. We then update the current state of the component to ensure the Grid knows about the new skip and value. This will apply to forward and backward paging!

This is a StackBlitz project that shows everything so far.

With all this done, we are now ready to add some PDF generation!

Generate PDF files from the KendoReact data grid

If you’ve read Parts 1 and 2 of this blog series, you know that we had to install and import the KendoReact PDF Processing library.

import * as React from 'react'; Import '@ progress/kendo - theme - material/dist/all CSS'; Import '. / style. CSS '; Import {grid, GridColumn as Column} from @progress/kendo-react-grid;Copy the code

When we install things again, let’s add the KendoReact Button and React Checkbox components, because we’ll use them for some dynamic configuration.

We’ll also update our import statement to not only include these new packages, but also add useRef from React:

As with other blog posts, the essence of exporting to PDF is to wrap our Grid components in tags. If we just surround our current Grid element with this tag, the Grid will disappear from our page because the entire element is only responsible for exporting as a PDF. Therefore, we basically need to double to display Grid elements. To make this easier, we can define a new element that can be reused.

We can then update our tag to:

We have a new reference here, pdfExportRef, which we can add to the beginning of our app.js file, where we set all our hooks and so on.

Another variable we should add is to let us know if we are actively exporting content, since we need to disable the export button. This will ensure that the user does not click our export button multiple times to generate the PDF file. This becomes especially important when we export large data sets that may take some time to generate. We will also prompt the user to choose where to download the file.

If we take a closer look at our new Grid tag, we’ll see that we have a button element in our Grid Toolbar that requires an event handler.

What we’re doing here is getting our Grid reference, updating what we’re exporting, and then calling the.save() function to start the export process. We also pass onPdfExportDone to us a callback function to hook up and do something after the file is generated. In this case, we just need to set isPdfExporting to false.

If we run this code in its current state, we can start generating React PDF files! However, you’ll notice that we only export the current page. In our sense, we only get five data items at a time, so we don’t actually export the second page. Let’s update the content to cover this situation so that we can export all the data at once.

Export all data

To make it easier to see the difference between one export and another, let’s set a check box to determine whether we export all pages or just one.

Now we just need to define where we define allPageCheck and the rest of the hook.

While the allPageChange event is quite simple, we are just backing up any variable currently set to.

The final step is to update onPdfExport to check whether we export all rows or just the current page.

Note that in this case, we call.save() and pass in all the data instead of the processedData variable. If we have other data on the server, this will be where we make requests to the back end and get all the data when no data is available on the client.

The other code we need to add to make sure we cover the edge case where processingData actually has no data is as follows:

This “resets” the page we are on to the first page when there is no data available, which might be the case when we update the grid data dynamically during the export. Essentially, when we export all the pages, this will be a piece of code that lets us iterate over the data and export each line.

There can be a lot of processing at once, so to make things easier, here’s a StackBlitz project that shows everything up and running.

With all of this, we now have a data grid that can generate PDF files from the current dataset or the entire dataset at once.

Use React TreeList to generate a PDF file

The KendoReact TreeList is very similar to the camp data grid, so I would like to include TreeList as a reference for similar samples. Since it took us some time to get the Grid project up and running, and the TreeList configuration is essentially the same as the Grid configuration, I’m not going to repeat each step, but pass the baton to you: This is a StackBlitz project that shows how this can be done for TreeList.

PDF everything!

This blog post really covers a lot of ground, so let’s summarize what we’ve done.

  • We configured the KendoReact data grid using the sample data set.
  • We configured the data grid to allow paging, handle how to use skip and get forward and backward paging.
  • We use the KendoReact PDF Processing Library to export the current page of the data table as a PDF file.
  • We added a check box to select whether rendering a PDF from a data table should contain only the current page or all available data.
  • Finally, we saw an example of how to generate PDF files from the React Tree Grid component!

Between camp PDF generation: 1-2-3 as easy, generate PDF from HTML camp demo: export invoice, and in this blog post, you now have on how powerful handle a good KendoReact PDF generation library. In addition to simple HTML, we can generate PDF files from our React application that contain more complex scenarios, such as invoices, and even advanced data components, such as the KendoReact data grid and the TreeList component!

If you like what you’ve seen so far, the next step is to get to know KendoReact — our specialized React UI components and data visualization library. KendoReact is built from scratch for React and works with any existing UI stack. Its more than 90 customizable and feature-rich components (including the PDF export feature you just read about) make it the perfect base for your internal UI library.