https://github.com/sanumuhammedc/form-to-pdf

A simple form to pdf utility as per user input
https://github.com/sanumuhammedc/form-to-pdf

bootstrap css form formtopdf html javascript jquery jspdf pdf pdf-generation

Last synced: about 1 month ago
JSON representation

A simple form to pdf utility as per user input

• Host: GitHub
• URL: https://github.com/sanumuhammedc/form-to-pdf
• Owner: sanumuhammedc
• License: gpl-3.0
• Created: 2021-10-12T14:37:40.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-20T08:26:50.000Z (over 3 years ago)
• Last Synced: 2024-10-18T23:20:28.510Z (8 months ago)
• Topics: bootstrap, css, form, formtopdf, html, javascript, jquery, jspdf, pdf, pdf-generation
• Language: HTML
• Homepage: https://bit.ly/contact-card-maker
• Size: 105 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Form-To-Pdf

## A simple pdf generator using HTML and JavaScript

## This is helpful for providing a certificate, bill or some sort of report for user as per their input

## Here I have used a library called jspdf to make dynamic pdf and Bootstrap for styling the html page

# Basic structure for Form to pdf   

#### (use as a reference only)

    

      

        

      

      

      

      

         

         


                 

           


           

              

            Print

         


       

             //function to add input from html form to image and print as document start here

             //function is called when generate button is clicked

             $('#button').click(function() {

             //creating a js pdf  

             var doc = new jsPDF();

             // Design form in JPEG format in any dimension here A4 size is used

             // Convert this image to base64 format using the site "https://www.base64-image.de/" 

             // copy the base64 image to below variable

             var imgData = '(paste base64 code here)';

              //Adding image to pdf here 0,0 represent the cordinate of image and 210,297 represent size(here it is A4 size)

              doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);

              //Accessing values from form and assigning to variables

              var name = $('#name').val();

              var email = $('#email').val();

              //setting font size and color for input text 

              doc.setFontSize(26);

              doc.setTextColor(92, 76, 76);

              //putting the input values in specific positions of image/pdf by specifying co-ordinate

              doc.text(23, 81, name);

              doc.text(23, 122, email);

              //Saving pdf in required name

              doc.save('Contact Card.pdf');

              

              // (comment above line and use code below if you want to preview instead of directly printing)

              // var string = doc.output("datauristring");

              //     var embed = "<embed width='100%' height='100%' src='" + string + "'/>";

              //     var x = window.open();

              //     x.document.open();

              //     x.document.write(embed);

              //     x.document.close();

        });

        //function to add input from html form to image and print as document end here