JAVASCRIPT

next js generate pdf complete

import * as React from "react";
import Image from "next/image";
import dynamic from "next/dynamic";
const GeneratePDF = dynamic(()=>import("./../src/components/GeneratePDF"),{ssr:false});
const app =()=>{
        const ref = React.useRef();

        return(<div className="main">
        <div className="content" ref={ref}>
        <h1>Hello PDF</h1>
        <img id="image" src="/images/image_header.jpg" width="300" height="200"/>
        <p id="text">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam animi, molestiae quaerat assumenda neque culpa ab aliquam facilis eos nesciunt! Voluptatibus eligendi vero amet dolorem omnis provident beatae nihil earum!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, est. Magni animi fugit voluptates mollitia officia libero in. Voluptatibus nisi assumenda accusamus deserunt sunt quidem in, ab perspiciatis ad rem.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil accusantium reprehenderit, quasi dolorum deserunt, nisi dolores quae officiis odio vel natus! Pariatur enim culpa velit consequatur sapiente natus dicta alias!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, asperiores error laudantium corporis sunt earum incidunt expedita quo quidem delectus fugiat facilis quia impedit sit magni quibusdam ipsam reiciendis quaerat!
        </p>
        </div>
        <GeneratePDF html={ref}/>
        </div>);
}

export default app;

next js generate pdf

import React from "react";
import { jsPDF,HTMLOptionImage } from "jspdf";
import { toPng,toCanvas } from "html-to-image";
type props = {

  html?: React.MutableRefObject<HTMLDivElement>;

};

const GeneratePdf: React.FC<props> = ({ html }) => {
  const generatePdf = () => {
      const doc = new jsPDF();

      let split=doc.splitTextToSize(document.getElementById("text").innerText,200);
      let image = document.getElementById("image").getAttribute('src');
      doc.text(document.querySelector(".content > h1").innerHTML,75,5);
      doc.addImage(image,70,7,60,60);
      doc.text(split,5,75);
      doc.output("dataurlnewwindow");  

  };

  const generateImage=async ()=>{
    const image = await toPng(html.current,{quality:0.95});
    const doc = new jsPDF();

      doc.addImage(image,'JPEG',5,22,200,160);
      doc.save();


  }
  return (

    <div className="button-container">
        <button onClick={generateImage}>
        Get PDF using image
      </button>
      <button onClick={generatePdf}>
        Get PDF as text
      </button>
    </div>

  );
};

export default GeneratePdf;