Node.JS React.JS HTML2PDF.JS Example to Convert HTML Template to PDF Document Using React-Html2pdf Library in Javascript

You are currently viewing Node.JS React.JS HTML2PDF.JS Example to Convert HTML Template to PDF Document Using React-Html2pdf Library in Javascript

Node.js React.js HTML2PDF.js Example to Convert HTML Template to PDF Document Using react-html2pdf Library in Javascript

$ npm i react-html2pdf

<span class="pl-c">//import</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Preview</span><span class="pl-kos">,</span> <span class="pl-s1">print</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-html2pdf'</span><span class="pl-kos">;</span>
 
<span class="pl-c">//render</span>
<span class="pl-c1"><</span><span class="pl-ent">Preview</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">'jsx-template'</span><span class="pl-kos">}</span> <span class="pl-c1">></span>
    <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>adsf<span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">></span>
<span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">Preview</span><span class="pl-c1">></span>
<span class="pl-c1"><</span><span class="pl-s1">button</span> <span class="pl-en">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-c1">=></span><span class="pl-en">print</span><span class="pl-kos">(</span><span class="pl-s">'a'</span><span class="pl-kos">,</span> <span class="pl-s">'jsx-template'</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">></span> <span class="pl-s1">print</span><span class="pl-c1"><</span><span class="pl-c1">/</span>button>

import React from 'react';
import { render } from 'react-dom';
import { Preview, print } from '../src';
import template from './template.html';
 
const App = () => (
    <div>
        <Preview id={'html-template'} html={template}/>
        <button onClick={()=>print('a', 'html-template')}> print</button>
        <Preview id={'jsx-template'} >
            <p>adsf</p>
        </Preview>
        <button onClick={()=>print('a', 'jsx-template')}> print</button>
    </div>
);
render(<App />, document.getElementById("root"));

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply