Deprecated as of Novemeber 2024. Please use New Library(B_Block v2.0)
Gbs Fwk Core
Pdf2images

Pdf2Images

Converts Pdf Files to Images (Base64).

Usage & Examples:

  • Pdf2Images:

    import { ChangeEvent, useState } from "react";
import { Pdf2Images } from "gbs-fwk-core";
 
export default function App() {
    const [pdfFile, setPdfFile] = useState<File | null | any>(null);
    const [images, setImages] = useState<any>([]);
 
    const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files && event.target.files[0];
        if (file) {
            setPdfFile(file);
        }
    };
 
    const clickAction = async () => {
        const img = await Pdf2Images(pdfFile);
        setImages(img)
    }
    return (
        <div>
            <input type="file" onChange={onFileChange} />
            <button onClick={() => {clickAction}}>Click</button>
            {images.length > 0 &&
                images.map((img: any) =>{
                    return <img src={img} width={120} height={120} />
                })}
        </div>);
    }

How to guides

  • How to Use Pdf2Images with Uploader Component

import React from "react";
import { Uploader } from "gbs-fwk-buildingblock";
import { Pdf2Images } from "./pdf2images";
 
export default function App() {
  const [fileEvent, setFileEvent] = React.useState < any > [];
  const [images, setImages] = React.useState < any > [];
 
  // This function returns image array and it should be asynchronous
  const p2i = async (file: any) => {
    const imageArray = await Pdf2Images(file);
    setImages(imageArray);
  };
 
  React.useEffect(() => {
    if (fileEvent.length > 0) {
      p2i(fileEvent[0].file);
    }
  }, [fileEvent]);
 
  return (
    <div>
      <Uploader
        batchId="e72ffee4-ccfb-49e9-a430-7ca6fa181d55"
        documentAPI={"https://gbsapi.com/api"}
        files={[]}
        fileCount={1}
        fileTypes={["pdf"]}
        onFilesChange={(event: any) => {
          setFileEvent(event);
        }}
      />
 
      {images.length > 0 &&
        images.map((img: any) => {
          return <img src={img} alt="" />;
        })}
    </div>
  );
}

  • How to Use Pdf2Images to convert fetched pdf file to Base64

import { useEffect, useState } from "react";
import { Pdf2Images } from "gbs-fwk-core";
 
export default function App() {
  const [imgs, setImgs] = useState<any[]>([]);
 
  const p2i = async (file: any) => {
    const imageArray = await Pdf2Images(file);
    console.log(imageArray);
    return imageArray;
  };
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://your_api_url/The%20Three%20Little%20Pigs.pdf" // change this with your api url to pdf
        );
        const blob = await response.blob();
        console.log("blob", blob);
        const imageUrls: any = await p2i(blob);
        setImgs(imageUrls);
      } catch (error) {
        console.error(error);
      }
    };
 
    fetchData();
  }, []);
 
  return (
    <div>
      {imgs.length > 0 &&
        imgs.map((img: any) => {
          return <img src={img} />;
        })}
    </div>
  );
}
Message ServiceGbs Fwk Core Global