jsPDF , TypeError: pdf.fromHTML is not a function in REACT

Question

i am using the next code to convert HTML to PDF using jsPDF and a simple react component.

import React from 'react';
import { renderToString } from 'react-dom/server';

import jsPDF from 'jspdf';

const styles = {
    fontFamily: 'sans-serif',
    textAlign: 'center',
};
const colstyle = {
    width: '30%',
};
const tableStyle = {
    width: '100%',
};

const Prints = () => (
    <div>
        <h3>Time & Materials Statement of Work (SOW)</h3>
        <h4>General Information</h4>
        <table id='tab_customers' class='table table-striped' style={tableStyle}>
            <colgroup>
                <col span='1' style={colstyle} />
                <col span='1' style={colstyle} />
            </colgroup>
            <thead>
                <tr class='warning'>
                    <th>SOW Creation Date</th>
                    <th>SOW Start Date</th>
                    <th>Project</th>
                    <th>Last Updated</th>
                    <th>SOW End Date</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dec 13, 2017</td>
                    <td>Jan 1, 2018</td>
                    <td>NM Connect - NMETNMCM</td>
                    <td>Dec 13, 2017</td>
                    <td>Dec 31, 2018</td>
                </tr>
            </tbody>
        </table>
        <p>
            This is a Time and Materials Statement of Work between Northwestern Mutual Life
            Insurance Company and Infosys with all general terms and conditions as described
            in the current Master Agreement and its related documents
        </p>
    </div>
);

const print = () => {
    const string = renderToString(<Prints />);
    const pdf = new jsPDF('p', 'mm', 'a4');

    console.log(typeof pdf);
    pdf.fromHTML(string);
    pdf.save('pdf');
};

const Prescription = () => {
    return (
        <div>
            <h1>RECETA</h1>
            <div style={styles}>
                <h2>Start editing to see some magic happen {'\u2728'}</h2>
                <button onClick={print}>print</button>
            </div>
        </div>
    );
};

export default Prescription;

The error is:

TypeError: pdf.fromHTML is not a function

How can I fix the error?

I tried to look for the "Typeof" and it shows "Object".

I want to convert the HTML in the REACT component to a downloadable PDF in the client side.

Answer 1

Your implementation is perfectly right. This issue is happening because of jspdf version. Don't use the latest version instead use V1.4.1 (see the attached screenshot).

Working Demo - https://codesandbox.io/s/fancy-platform-7f26p?file=/src/App.js

Answer 2

Use .html() function

Documentation: http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html

Edit: I realize my post was not enough explanation. You do not need to switch to a different version of jsPDF. The renamed the fromHtml() method to html() method. Everything you know about fromHtml() is exactly the same as html() (to my knowledge).