Brave Search

How to generate a PDF File (just as a File) using html2pdf

stackoverflow.com › questions › 69402131 › how-to-generate-a-pdf-file-just-as-a-file-using-html2pdf

If any one searching an answer for this question. here it is;

I wanted to create a report(invoice) using HTML. Below you can find how I designed my invoice.

Note: Please note that I included html2pdf.js as a script in HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Invoice</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<body>
<section id="my_invoice">
    <!-- I designed the invoice here -->
</section>
</body>
</html>

Most of the existing code tutorials show us to download the generated PDF. Following JavaScript code will help you to download the PDF. When you run this code, browser will open a window and asks where to download this PDF file. Then, you can save the PDF file easily.

let element = document.getElementById('my_invoice');
let opt = {
  margin:       1,
  filename:     'my-invoice.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
};

// New Promise-based usage:
html2pdf().set(opt).from(element).save();

But my requirement was slightly different. I just wanted to create the PDF file. Then, do something with that file. In my scenario, I wanted to upload that generated PDF file to Google Drive. Following code segment shows how I use html2pdf.js to generate the PDF file(blob). Please note that I used .outputPdf() method to get the blob. For more information, you can refer to the html2pdf.js Worker API documentation.

  /** Creates the PDF report document.
     * @return Promise: resolves if PDF report generates successfully,
     * otherwise rejects. */
    function createPDF() {
        return new Promise(async (resolve, reject) => {
            console.log('create PDF function executed!');
            let element = document.getElementById('my_invoice');

            let opt = {
                margin: 1,
                filename: 'my-invoice.pdf',
                image: {type: 'jpeg', quality: 0.95},
                html2canvas: {scale: 2, useCORS: true},
                jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'}
            };

            try {
                const blob = await window.html2pdf().set(opt).from(element).outputPdf('blob', 'my-invoice.pdf');
                resolve(blob);
            } catch (e) {
                reject(e);
            }
        });

    }

Hope you learnt something. Cheers!

Answer from Dhanusha_Perera07 on Stack Overflow

npm

npmjs.com › package › react-html2pdf

react-html2pdf - npm

pdf generate libs for react js. Latest version: 1.0.1, last published: 7 years ago. Start using react-html2pdf in your project by running `npm i react-html2pdf`. There are 1 other projects in the npm registry using react-html2pdf.

      » npm install react-html2pdf

Published Feb 21, 2019

Version 1.0.1

Author sanpyaelin

Repository https://github.com/sanpyaelin/react-html2pdf

Homepage https://github.com/sanpyaelin/react-html2pdf#readme

Nutrient

nutrient.io › blog › sdk › how to convert html to pdf using html2df and react

HTML to PDF in React: Convert HTML to PDF using html2pdf.js

May 7, 2025 - As with anything, there are both pros and cons to this conversion solution. Easy to use — html2pdf is a straightforward library that allows you to convert HTML to PDF using a few lines of JavaScript code.

Videos

11:16

YouTube

Build a React.js HTML2PDF.js Example to Export Dynamic ...

December 2, 2024

11:18

YouTube

Javascript HTML2PDF.js Example to Export HTML to PDF Document Web ...

October 9, 2024

youtube.com

Convert HTML to PDF in React Tutorial | Step-by-Step Guide!

05:15

YouTube

React.js HTML2PDF.js Project to Convert Dynamic Raw HTML Or File ...

jsPDF Tutorial - Convert HTML to PDF using JavaScript HTML2PDF.js ...

October 18, 2021

2.05K

youtube.com

html2pdf.js Library Tutorial to Convert HTML to PDF and Add ...

View all

People also ask

How can I convert HTML to PDF in a React application using html2pdf?

Install html2pdf.js, import it into your React component, and use html2pdf().from(element).save() to convert HTML content into a PDF.

pspdfkit.com

pspdfkit.com › blog › 2023 › how-to-convert-html-to-pdf-using-html2df-and-react

HTML to PDF in React: Convert HTML to PDF using html2pdf.js

What are the benefits of using html2pdf for PDF conversion in React?

html2pdf is easy to use, operates client-side, supports various customizations, and is open source.

pspdfkit.com

pspdfkit.com › blog › 2023 › how-to-convert-html-to-pdf-using-html2df-and-react

HTML to PDF in React: Convert HTML to PDF using html2pdf.js

What are the steps to install and use html2pdf in a React project?

1. Install with npm install html2pdf.js. 2. Import using import html2pdf from 'html2pdf.js';. 3. Use html2pdf().from(element).save() to convert and download the PDF.

pspdfkit.com

pspdfkit.com › blog › 2023 › how-to-convert-html-to-pdf-using-html2df-and-react

HTML to PDF in React: Convert HTML to PDF using html2pdf.js

DEV Community

dev.to › kazmi066 › converting-jsx-to-downloadable-pdf-in-react-20bh

Converting JSX to downloadable pdf in react - DEV Community

July 31, 2022 - import html2pdf from 'html2pdf.js/dist/html2pdf.min'; import './App.css'; function App() { const pdfJSX = () => { return ( <> <h1>JSX to PDF Convert Example</h1> <h2>Hello React</h2> </> ) } const printHandler = () => { const printElement = pdfJSX(); console.log(printElement); html2pdf().from(printElement).save(); } return ( <div className="App"> <button onClick={printHandler}>Print</button> </div> ); } export default App;

GitHub

github.com › sanpyaelin › react-html2pdf

GitHub - sanpyaelin/react-html2pdf: covert html to pdf

//import import { Preview, print } from 'react-html2pdf'; //render <Preview id={'jsx-template'} > <p>adsf</p> </Preview> <button onClick={()=>print('a', 'jsx-template')}> print</button>

Starred by 11 users

Forked by 9 users

Languages JavaScript

Space Jelly

spacejelly.dev › posts › generate-a-pdf-from-html-in-javascript

Generate a PDF in React on Space Jelly

August 18, 2024 - But working in a React environment you get something a bit closer to HTML or JSX, where React PDF uses a components API and PDF Kit under the hood to give a more natural way of expressing the content (just like you would in React).

CodeSandbox

codesandbox.io › examples › package › react-html2pdf

react-html2pdf examples - CodeSandbox

Use this online react-html2pdf playground to view and fork react-html2pdf example apps and templates on CodeSandbox.

GitHub

github.com › eKoopmans › html2pdf.js › issues › 244

How to import this lib into react typescript? · Issue #244 · eKoopmans/html2pdf.js

July 23, 2019 - "undefined" : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('es6-promise/auto'), require('jspdf'), require('html2canvas')) : typeof define === 'function' && define.amd ? define(['es6-promise/auto', 'jspdf', 'html2canvas'], factory) : global.html2pdf = factory(null, global.jsPDF, global.html2canvas); })(this, function (auto, jsPDF, html2canvas) { 'use strict'; jsPDF = jsPDF && jsPDF.hasOwnProperty('default') ?

Published Jul 23, 2019

Find elsewhere

Google Bing Mojeek

npm

npmjs.com › package › html2pdf.js › v › 0.9.0

html2pdf.js - npm

You may add html2pdf-specific page-breaks to your document by adding the CSS class html2pdf__page-break to any element (normally an empty div). For React elements, use className=html2pdf__page-break. During PDF creation, these elements will ...

      » npm install html2pdf.js

Published Sep 17, 2025

Version 0.9.0

Author Erik Koopmans

Repository https://github.com/eKoopmans/html2pdf

Homepage https://github.com/eKoopmans/html2pdf

OutSystems

outsystems.com › forums › discussion › 68458 › reactive-html2pdf-js-how-to-use-this-reactive-html2pdf-js

[Reactive Html2Pdf Js] How to use this Reactive Html2Pdf Js | OutSystems

[Reactive Html2Pdf Js] How to use this Reactive Html2Pdf Js

Stack Overflow

stackoverflow.com › questions › 69402131 › how-to-generate-a-pdf-file-just-as-a-file-using-html2pdf

How to generate a PDF File (just as a File) using html2pdf

Top answer

1 of 1

If any one searching an answer for this question. here it is;

I wanted to create a report(invoice) using HTML. Below you can find how I designed my invoice.

Note: Please note that I included html2pdf.js as a script in HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Invoice</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<body>
<section id="my_invoice">
    <!-- I designed the invoice here -->
</section>
</body>
</html>

let element = document.getElementById('my_invoice');
let opt = {
  margin:       1,
  filename:     'my-invoice.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
};

// New Promise-based usage:
html2pdf().set(opt).from(element).save();

  /** Creates the PDF report document.
     * @return Promise: resolves if PDF report generates successfully,
     * otherwise rejects. */
    function createPDF() {
        return new Promise(async (resolve, reject) => {
            console.log('create PDF function executed!');
            let element = document.getElementById('my_invoice');

            let opt = {
                margin: 1,
                filename: 'my-invoice.pdf',
                image: {type: 'jpeg', quality: 0.95},
                html2canvas: {scale: 2, useCORS: true},
                jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'}
            };

            try {
                const blob = await window.html2pdf().set(opt).from(element).outputPdf('blob', 'my-invoice.pdf');
                resolve(blob);
            } catch (e) {
                reject(e);
            }
        });

    }

Hope you learnt something. Cheers!

Stack Overflow

stackoverflow.com › questions › 76697019 › converting-dynamic-html-content-to-pdf-in-react-js

Converting dynamic html content to pdf in React js

You can try html3pdf (npmjs.com/package/html3pdf), which is html2pdf.js with a bunch of bug fixes.

Stack Overflow

stackoverflow.com › questions › 46468247 › i-want-to-implement-html2pdf-of-jspdf-in-my-react-container-how-can-i-implement

reactjs - I want to implement html2pdf of jsPdf in my react container. How can I implement it? any example? - Stack Overflow

react-redux · jspdf · Share · ... first) 0 · You can use the below package for html to pdf. It has some example code. Html2pdf= link....

CodeSandbox

codesandbox.io › p › sandbox › react-html2pdf-w0g8l

react-html2pdf

CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.

jsDelivr

jsdelivr.com › package › npm › html2pdf-react

html2pdf-react CDN by jsDelivr - A CDN for npm and GitHub

August 8, 2021 - A free, fast, and reliable CDN for html2pdf-react. A html2pdf wrapper for React

Published Aug 05, 2021

Repository https://github.com/puf17640/html2pdf-react

Stack Overflow

stackoverflow.com › questions › 76837292 › warning-in-node-modules-html2pdf-js-dist-html2pdf-js-failed-to-parse-source

reactjs - WARNING in ./node_modules/html2pdf.js/dist/html2pdf.js - Failed to parse source map - Stack Overflow