how to convert html to pdf in modal with Jquery?

Question

I have a task to do where i have to show pdf in bootstrap modal with out the download option.That pdf would have input fields where user can upload its signature and when user would click okay it would save respective pdf with filled information. I tried to do so,with Bootstrap modal i am able to show the form with input options in modal pop up, but i want whatever i write in modal,it should show up as pdf and that to with out doanload option.

I am searching answer in Jquery,i saw jsPDF but all tutorials show how to download html2pdf.I just want to show user to read it first not download.

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div style="text-align: center;" class="test">
            <div>
                <hr><h2>Contract</h2><hr>
                <h3>Hereby,i buy LaLaLa Land in the exchange of 2 cookies.</h3>
            </div>

            <div class="signature">
                <hr><h2>Signature Page</h2><hr>

                    <img class="profile-pic" />
                    <div class="upload-button"></div>
                    <input class="file-upload" type="file" accept="image/*"/>

                <h4>Document ID:dlfkhahdf4565n5jbnjk45h</h4>
                <h4>User Name:Donald Trump</h4>
                <h4>User ID:456jkn45</h4>
            </div>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Okay</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Simply display the data: URI of the created PDF in an iframe, or use PDF.js to show it:

// Set up jsPDF
var pdf = new jsPDF();

// Set up PDF.js
//pdfjsLib.GlobalWorkerOptions.workerSrc =
//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';

function render_example() {
  var source = document.getElementById("convert_me_to_pdf");
  pdf.fromHTML(source, function (dispose) {
    var pdf_uri = pdf.output("datauristring");
    document.getElementById("show_pdf_here").src = pdf_uri;

    var pdf_array = pdf.output("arraybuffer");
    // PDF.js here!
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>

<button onclick="render_example()">Render</button>

<h1>Output</h1>
<h2><code>&lt;iframe&gt;</code></h2>
<iframe id="show_pdf_here" src="//www.example.org"></iframe>
<h2>PDF.js</h2>
Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.
<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>

<h1>Input</h1>
<div id="convert_me_to_pdf">
  <p>
    Example...
  </p>
  <textarea></textarea>
</div>

Erm... This should work... I don't know why it doesn't. I'm posting it anyway in case it helps.