Export to PDF in React-Table

Question

I have 10 row of values in react-table .I need to convert to PDF format?.ss it possible to convert?

Solution

Use jsPDF and jspdf-autotable to accomplish this. Check out the code below:

import React from 'react';
import jsPDF from "jspdf";
import "jspdf-autotable";
import './App.css';

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      people: [
        { name: "Keanu Reeves", profession: "Actor" },
        { name: "Lionel Messi", profession: "Football Player" },
        { name: "Cristiano Ronaldo", profession: "Football Player" },
        { name: "Jack Nicklaus", profession: "Golf Player" },
      ]
    }
  }

  exportPDF = () => {
    const unit = "pt";
    const size = "A4"; // Use A1, A2, A3 or A4
    const orientation = "portrait"; // portrait or landscape

    const marginLeft = 40;
    const doc = new jsPDF(orientation, unit, size);

    doc.setFontSize(15);

    const title = "My Awesome Report";
    const headers = [["NAME", "PROFESSION"]];

    const data = this.state.people.map(elt=> [elt.name, elt.profession]);

    let content = {
      startY: 50,
      head: headers,
      body: data
    };

    doc.text(title, marginLeft, 40);
    doc.autoTable(content);
    doc.save("report.pdf")
  }

  render() {
    return (
      <div>
        <button onClick={() => this.exportPDF()}>Generate Report</button>
      </div>
    );
  }
}

export default App;

This should generate a PDF like this:

Hope this helps.

Comments

[Manu Panduu]

Thanks very very much

[lomse]

Happy to hear ;)

[piyush172]

getting this error "Error: Requiring module "node_modules\jspdf\dist\jspdf.es.min.js", which threw an exception: TypeError: undefined is not an object (evaluating 'r.atob.bind')" Pls help @lomse

[lomse]

Have you installed the jspdf module? If not simply install it with the command npm install jspdf

[Ali Aref]

need to apply filters on print too, currently it's printing all the data. (my react-table has filtering and sorting options any way to include them?)

[MogerCS]

@lomse, this works fine for me, but is there any other possibility to export pdf table if each row last column has image.