“Next js générer du pdf” Réponses codées

Next js générer du 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;
conjunction cell

suivant js générer du pdf complet

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;
conjunction cell

Réponses similaires à “Next js générer du pdf”

Questions similaires à “Next js générer du pdf”

Plus de réponses similaires à “Next js générer du pdf” dans JavaScript

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code