How to add Signatures to a text Field of a PDF in MERN Stack

MUNEEB WAQAS — Thu, 08 Feb 2024 18:01:38 +0000

Introduction:

In today's digital age, electronic signatures play a vital role in various applications, from signing contracts to validating transactions. Integrating signature functionality into web applications is crucial for streamlining processes and enhancing user experience. In this guide, we'll explore how to implement a signature pad in React.js and then incorporate that signature into a text field within a PDF document in a MERN (MongoDB, Express.js, React.js, Node.js) stack.

Part 1:

Implementing Signature Pad in React.js First, let's set up a React.js project and integrate a signature pad component. We'll be using the

react-signature-canvas

Library for this purpose, which provides an easy-to-use API for capturing signatures.This is the link for the npm package

Npm Package if react-signature-canvas

Step 1:

Installing the Signature Pad Library
Next, install the react-signature-canvas library using npm or yarn:

npm install react-signature-canvas

Step 2:

Integrating the Signature Pad Component Now, let's create a component called SignaturePad and integrate the SignatureCanvas component provided by react-signature-canvas.This is my ReactJS Code

const Done = ()=>{
    seturl(sign.getTrimmedCanvas().toDataURL('image/png'));
}
const Clear = ()=>{
  sign.clear();
}

const Forward = ()  => {
          console.log(url);
          axios.post('http://localhost:8080/send-data',{mydata  , price , IBAN , Rechnungsanschrift , Kontoinhaber , Gebäude , Gebäudeinhaber , url},{withCredentials : true}).then((response)=>{
                alert('PDF Saved'); 
        }).catch((error)=>{
        console.log(error);
              alert(error + 'in the PDF');
        })
  }

const [sign,setsign] = useState();
  const [url , seturl] = useState('');

This is my JSX Code

<div className='justify-content-center align-items-center canvas'>
                              <SignatureCanvas penColor='black'
               canvasProps={{className: 'sigCanvas canvas'}}
                  ref={data=>setsign(data)}
              />
                    </div>

                    <Button className={`rounded-5 w-25 m-3 btn-white`}  onClick={Clear}>
Cancel
                    </Button>
                    <Button className={`rounded-5 w-25 m-3 btn-white`}  onClick={Done}>
Save
                    </Button>

Explanation of the code

This code snippet is a React component that allows a user to draw a signature on a canvas using the SignatureCanvas component.

Here's a breakdown of the functionality:

Done: This function is called when the user clicks the "Save" button. It retrieves the data URL of the signature canvas, representing the drawn signature, and sets it in the component's state variable url.

Clear: This function is called when the user clicks the "Cancel" button. It clears the signature canvas.

Forward: This function is called when the user clicks a button to send data to a server. It sends various data, including the signature URL (url), to an endpoint using an Axios POST request.

useState: This hook is used to initialize state variables. sign is used to hold a reference to the SignatureCanvas component, and url is used to store the data URL of the drawn signature.

SignatureCanvas: This component provides a canvas for the user to draw a signature. It's configured with a black pen color and assigned a reference using the ref attribute, allowing access to its methods and properties.

Buttons: Two buttons are rendered for the user to interact with the signature canvas. One button clears the canvas (Clear), and the other saves the drawn signature (Done).

Part 2:

Adding Signature to a PDF Text Field in MERN Stack
Now, let's move on to integrating the signature captured in our React.js application with a PDF document in the MERN stack.

Step 1:

Create an Express.js API Endpoint Set up an Express.js server and create an API endpoint to receive and store signature data.

app.post('/send-data' ,  async (req,res)=>{

  const {mydata  , price , IBAN , Rechnungsanschrift , Kontoinhaber , Gebäude , Gebäudeinhaber , url} = req.body;
}
// Now this image object has the URL of the captured

Step 2:

Add Signature to PDF Document Using a library like pdf-lib, you can dynamically generate a PDF document with the signature added to a text field.
const pdfDoc = await PDFDocument.load(await readFile('NameofPDFFILE.pdf'));

Fetching and Embedding Image in PDF Document

This code snippet demonstrates the process of fetching an image from a URL and embedding it into a PDF document

const imageBytes = await fetchImageFromUrl(URL);
const image = await pdfDoc.embedPng(imageBytes);

Get the Signature/Text Field from the PDF and paste the image there

const signature = form.getTextField('Datum und Unterschrift');
signature.setFontSize(25);
signature.setImage(image);

Tutorial for Making Frontend in order to capture end user's Signature

How much Html, CSS & JS do I need to know?

MUNEEB WAQAS — Wed, 21 Jun 2023 10:57:00 +0000

Hi, I am a software Engineering Student. I wanted to be a front end engineer. I have learned basic HTML, CSS and JS. Furthermore, I have done 1–2 projects in them, and now I am learning ReactJS. But still I feel like I don’t know enough HTML, CSS and JS. Like If I have to centre a div then it will cause trouble for me on how to position it.So should I have to move on to ReactJS or learn more HTML, CSS and JS. Also give me some time frame on how much time should I have to spend on these skills(HTML, CSS & JS). Moreover, I have made a gig on Fiverr regarding ReactJS development, and I am in a hurry to earn quickly from front-end development.
So what should I do in this scenario? Seniors, Please guide me.

Advice from Senior Software Engineers

MUNEEB WAQAS — Tue, 20 Jun 2023 15:37:42 +0000

Hi I am a 3rd year Software Engineering Student.I am currently Learning ReactJS and then I will move onto Full Stack development.But I wanted to learn Artificial Intelligence so that I can use my web development skills along with AI/ML/.So should I learn AI along with my web development learning or should I first learn web development and then Artificial Intelligence.Please Guide me.

Use of Bootstrap

MUNEEB WAQAS — Sun, 12 Feb 2023 09:58:40 +0000

Should a Front end developer learner use bootstrap, or should I have to develop each and every component of the website by myself. I am a beginner in front end development?

Forem: MUNEEB WAQAS

How to add Signatures to a text Field of a PDF in MERN Stack

Introduction:

Part 1:

Step 1:

Step 2:

Explanation of the code

Part 2:

Step 1:

Step 2:

How much Html, CSS & JS do I need to know?

Advice from Senior Software Engineers

Use of Bootstrap