/Javascript/React/React convert table to pdf

React convert table to pdf

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;

Source: stackoverflow.com

Similar codes

0 vote186 views1 answer
How to trigger on Blur only when clicked outside parent component and not child component in react js
Javascript React
0 vote504 views1 answer
React navigation 4
Javascript React
0 vote190 views1 answer
Switch button react value
Javascript React
0 vote192 views1 answer
React focus textarea
Javascript React
1 vote263 views2 answers
Shadow on view in react natice
Javascript React
10 votes170 views2 answers
React navigation no header
Javascript React
35 votes190 views6 answers
Create react app with tailwind
Javascript React
0 vote232 views1 answer
How to get the data from clicking on notification on web in reactjs
Javascript React
1 vote199 views1 answer
How to share file from react native
Javascript React
0 vote219 views1 answer
Jest mock react-redux hooks
Javascript React