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

Viewed 9638

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.

3 Answers

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).

First uninstall the latest package with below mentioned command:

npm uninstall jspdf

Install older version by using below command

npm install jspdf@1.4.1
Related