How to convert one HTML Page into one PDF with Multiple Pages using Javascript

Question

I am trying to create form with Inputs (majorly expandable textarea). I have created a button with id "create_pdf" when clicked it will generated the whole HTML into one PDF however When I click on the generate PDF button designed to run this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
   
    <title>Incident Report</title>
    <!-- CSS -->
<style>
    
    .myForm {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 0.8em;
    width: 45em;
    padding: 1em;
    border: 1px solid #ccc;
    
    }
    
    .myForm * {
    box-sizing: border-box;
    }
    
    .myForm fieldset {
        background-color: #eeeeee;
    }
    
    .myForm legend
    {
  background-color: gray;
  color: white;
  padding: 5px 10px;
    }
    
    .myForm label {
    padding: 0;
    font-weight: bold;
    }
    
    .myForm label.choice {
    font-size: 0.9em;
    font-weight: normal;
    }
    
    
    
    .myForm input[type="text"],
    .myForm input[type="tel"],
    .myForm input[type="email"],
    .myForm input[type="datetime-local"],
    .myForm select,
    .myForm textarea {
    float: right;
    width: 60%;
    border: 1px solid #ccc;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 0.9em;
    padding: 0.3em;
    }
    
    .myForm textarea {
    height: 50px;
    width: 550px
    }
    
    
    .myForm button {
    padding: 1em;
    border-radius: 0.5em;
    background: #eee;
    border: none;
    font-weight: bold;
    margin-left: 40%;
    margin-top: 1.8em;
    }
    
    .myForm button:hover {
    background: #ccc;
    cursor: pointer;
    }

    #autoresizing { 
            display: block; 
            overflow: hidden; 
            resize: none; 
        } 
    </style>

<script src="jquery-1.12.4.min.js"></script>  
<script src="jspdf.min.js"></script>  
</head>
<body>
    <input type="button" id="create_pdf" value="Generate PDF">
    <form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">
        <h2>Incident Report</h2>
        

        <fieldset>
    
        <legend>Incident Metrics</legend>
        <p><label>Customer Name <input type="text" name="customer_name" required> </label></p>
        <p><label>Case <input type="text" name="case" required> </label></p>
        <p>
            <label>Severity
            <select id="Severity" name="Severity">
            <option value="" selected="selected">Select One</option>
            <option value="Critical" >Critical</option>
            <option value="High" >High</option>
            
            </select>
            </label> 
        </p>
        <p><label>Incident Reported Time<input type="datetime-local" name="Incident_reported_Time" required></label></p>

        <p><label>Incident Resolved Time<input type="datetime-local" name="Incident_resolved_Time" required></label></p>
        
        
        <p><label>MTTR<input type="text" name="MTTR" required> </label></p>
        <p>
            <label>SLA Achieved
            <select id="SLA" name="SLA">
            <option value="" selected="selected">Select One</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
            
            </select>
            </label> 
        </p>
        <p>
            <label>Product
            <select id="Product" name="Product">
            <option value="" selected="selected">Select One</option>
            <option value="Command Center">Command Center</option>
            <option value="ALM">ALM</option>
            <option value="AGA">AGA</option>
            
            </select>
            </label> 
        </p>
        <p><label>Teams Involved</label></p>
        <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox4" value = "option1"> L2
         </label>
         <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox5" value = "option2"> L3
         </label>
         <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Network
         </label>
         <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox6" value = "option3"> SysAdmin
         </label>
         <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox6" value = "option3"> DBA
         </label>
         <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Others(Please Mention)
            
         </label>
         <textarea id="textarea6">List Other Teams Involved</textarea>
         
        </fieldset>
        
        <br>
        <fieldset>

            <legend>Problem Statement</legend>
            <p><label>Description</label></p>
        
         <textarea id="autoresizing">Add Description</textarea>
         <br>
         <p><label>Business Impact</label></p>
         <textarea id="autoResizing">Add Business Impact</textarea>
              
        </fieldset>

        <br>

        <fieldset>
        <legend>Workaround/Corrective Measures</legend>
        <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Manual WO
         </label>
         <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Patch
         </label>
         <label class = "checkbox-inline">
            <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> N/A
         </label>
        </fieldset>
    <br>
    <fieldset>
        <legend>Investigation Done</legend>
        <textarea id="textarea3">Add Investigation Done</textarea>
    </fieldset>
    <br>
    <fieldset>
        <legend>Preventive Analysis</legend>
        <textarea id="textarea4">Add Preventive Analysis</textarea>
    </fieldset>
    <br>
    <fieldset>
        <legend>Root Cause Analysis</legend>
        <textarea id="textarea5">Add Root Cause Analysis</textarea>
    </fieldset>
    <p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
    <p><label for="file" style="cursor: pointer;">Upload Image</label></p>
    <p><img id="output" width="500" /></p>
        </form>
        <script>  
            (function () {  
                var  
                 form = $('.myForm'),  
                 cache_width = form.width(),  
                 a4 = [595.28, 841.89]; // for a4 size paper width and height  
          
                $('#create_pdf').on('click', function () {  
                    $('body').scrollTop(0);  
                    createPDF();  
                });  
                //create pdf  
                function createPDF() {  
                    getCanvas().then(function (canvas) {  
                        var  
                         img = canvas.toDataURL("image/png"),  
                         doc = new jsPDF({  
                             unit: 'px',  
                             format: 'a4'  
                         });  
                        doc.addImage(img, 'JPEG', 20, 20);  
                        doc.save('Incident_Report.pdf');  
                        form.width(cache_width);  
                    });  
                }  
          
                // create canvas object  
                function getCanvas() {  
                    form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
                    return html2canvas(form, {  
                        imageTimeout: 2000,  
                        removeContainer: true  
                    });  
                }  
          
            }());  
        </script>  
        <script>  
            /* 
         * jQuery helper plugin for examples and tests 
         */  
            (function ($) {  
                $.fn.html2canvas = function (options) {  
                    var date = new Date(),  
                    $message = null,  
                    timeoutTimer = false,  
                    timer = date.getTime();  
                    html2canvas.logging = options && options.logging;  
                    html2canvas.Preload(this[0], $.extend({  
                        complete: function (images) {  
                            var queue = html2canvas.Parse(this[0], images, options),  
                            $canvas = $(html2canvas.Renderer(queue, options)),  
                            finishTime = new Date();  
          
                            $canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);  
                            $canvas.siblings().toggle();  
          
                            $(window).click(function () {  
                                if (!$canvas.is(':visible')) {  
                                    $canvas.toggle().siblings().toggle();  
                                    throwMessage("Canvas Render visible");  
                                } else {  
                                    $canvas.siblings().toggle();  
                                    $canvas.toggle();  
                                    throwMessage("Canvas Render hidden");  
                                }  
                            });  
                            throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);  
                        }  
                    }, options));  
          
                    function throwMessage(msg, duration) {  
                        window.clearTimeout(timeoutTimer);  
                        timeoutTimer = window.setTimeout(function () {  
                            $message.fadeOut(function () {  
                                $message.remove();  
                            });  
                        }, duration || 2000);  
                        if ($message)  
                            $message.remove();  
                        $message = $('<div ></div>').html(msg).css({  
                            margin: 0,  
                            padding: 10,  
                            background: "#000",  
                            opacity: 0.7,  
                            position: "fixed",  
                            top: 10,  
                            right: 10,  
                            fontFamily: 'Tahoma',  
                            color: '#fff',  
                            fontSize: 12,  
                            borderRadius: 12,  
                            width: 'auto',  
                            height: 'auto',  
                            textAlign: 'center',  
                            textDecoration: 'none'  
                        }).hide().fadeIn().appendTo('body');  
                    }  
                };  
            })(jQuery);  
          
        </script>  
       
         <script type="text/javascript"> 
            var textarea = document.querySelectorAll("#autoResizing,#autoresizing,#textarea3,#textarea4,#textarea5,#textarea6"); 
            for (var i = 0; i < textarea.length; i++){
            textarea[i].addEventListener('input', autoResize, false);
            }
            
          
            function autoResize() { 
                this.style.height = 'auto'; 
                this.style.height = this.scrollHeight + 'px'; 
            } 
        </script> 
        <script>
            var loadFile = function(event) {
                var image = document.getElementById('output');
                image.src = URL.createObjectURL(event.target.files[0]);
            };
            </script>
</body>
</html>

It only generates one Page of the whole form as PDF, Basically it is discarding everything beyond that. Can someone help me in correcting this ?

check out this tutorial https://www.freakyjolly.com/multipage-canvas-pdf-using-jspdf/ — Jah, Sep 08 '20 at 10:52
@Jah I did use that but it did not help, May be I am doing something wrong — s.gupta, Sep 08 '20 at 10:56
@Jah , when I use the code sinnpet from the above link, it does print multiple pages, but the first few are empty and the last page has only the fields but not the content — s.gupta, Sep 08 '20 at 10:57
Does this answer your question? [Generate pdf from HTML in div using Javascript](https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript) — MaxiGui, Sep 08 '20 at 11:00
@MaxiGui It does not, since when I use Divs it is generating an empty Single page PDF — s.gupta, Sep 08 '20 at 11:02
@Jah I am not able to add the HTML in the comments since it is too long — s.gupta, Sep 08 '20 at 11:03

How to convert one HTML Page into one PDF with Multiple Pages using Javascript

0 Answers0