Get Base64 string

The base64 string can be created by using the DrawDOM method which is creating the string based on a passed DOM element.

The following example demonstrates how to get the base64 string generated from exporting the Grid.

import React from 'react';
import ReactDOM from 'react-dom';
import { drawDOM, exportPDF } from '@progress/kendo-drawing';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

class App extends React.Component {
  pdfExportComponent;
  grid;

  constructor(props) {
      super(props);
      this.state = {
          gridData: [
              {
                  "ProductID": 1,
                  "ProductName": "Chai",
                  "SupplierID": 1,
                  "CategoryID": 1,
                  "QuantityPerUnit": "10 boxes x 20 bags",
                  "UnitPrice": 18.0000,
                  "UnitsInStock": 39,
                  "UnitsOnOrder": 0,
                  "ReorderLevel": 10,
                  "Discontinued": false,
                  "Category": {
                      "CategoryID": 1,
                      "CategoryName": "Beverages",
                      "Description": "Soft drinks, coffees, teas, beers, and ales"
                  }
              }
          ]
      };
  }

  render() {
      return (
        <div>
            <div className="example-config">
            <button className="k-button" onClick={this.exportPDFWithMethod}>Export with method</button>
            </div>

            <Grid
            style={{ maxHeight: '400px' }}
            data={this.state.gridData}
            >
            <Column field="ProductID" title="ID" width="40px" />
            <Column field="ProductName" title="Name" width="250px" />
            <Column field="Category.CategoryName" title="CategoryName" />
            <Column field="UnitPrice" title="Price" width="80px" />
            <Column field="UnitsInStock" title="In stock" width="80px" />
            </Grid>
        </div>
      );
  }

  exportPDFWithMethod = () => {
      let gridElement = document.getElementsByClassName('k-grid')[0];
      drawDOM(gridElement, { paperSize: "A3", margin: 100 }).then((group) => {
          return exportPDF(group);
      }).then((dataUri) => {
          console.log(dataUri.split(';base64,')[1]);
      });
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('my-app')
);

In this article