title: Way to build an app in which user fills a form that can be downloaded or emailed as a PDF?
body: <p>I'm working on an app through Phonegap (written in HTML/CSS/JS) that's intended to have the user fill out a form (radio buttons, text boxes, etc.) which will then be either downloadable (as PDF) or simply sent to a specific email upon completion (as a PDF).</p>
  <p>I've been using a JavaScript function that prints the page as a PDF that's automatically downloaded at the click of a button on the bottom of the page.</p>
  <p>But I've noticed that the Print to PDF function doesn't seem to be a true PDF in the sense that I can't highlight the printed text within the resultant PDF. Additionally, the amount of information in each print seems to have a limit. I can't get it to print content on the page beyond a certain length. I also am not sure that this works on mobile, but it seems to work when tested in the browser on Chrome (with some issues).</p>
  <p>What's the best way to create a PDF after the user fills out the form? I've read that I can maybe create something server-side and have the app send a PDF (via email) from a server after the user fills out the information on the page. Does this sound right?</p>
  <p>Can I make it so that the user fills out the information in the app, clicks a button, and then the information on the app is saved and a PDF of said information is sent via email? I'm not quite sure how to set up a server to do this if even possible.</p>
  <p>Simply, I just want my clients to fill out the info in the app, and then click a button on the bottom of the page that then takes that information and spits out a PDF. I'm having trouble finding an effective way to actually do this.</p>
  <p>Here's my code thus far (sans head, CSS):</p>
  <pre><code>    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js&quot;
          integrity=&quot;sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;div id=&quot;content2&quot; class=&quot;app&quot;&gt;      
          &lt;h1&gt;&lt;u&gt;4-Point Inspection&lt;/u&gt;&lt;/h1&gt;
  
          &lt;br&gt;
  
          &lt;div class=&quot;border&quot;&gt;
          &lt;center&gt;&lt;form&gt;
            &lt;label for=&quot;fname&quot;&gt;Insured/Applicant Name&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;&lt;/center&gt;
          &lt;center&gt;&lt;form&gt;
            &lt;label for=&quot;fname&quot;&gt;Application/Policy #&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;&lt;/center&gt;
          &lt;center&gt;&lt;form&gt;
            &lt;label for=&quot;fname&quot;&gt;Address Inspected&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;&lt;/center&gt;
          &lt;center&gt;&lt;form&gt;
            &lt;label for=&quot;fname&quot;&gt;Phone&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;&lt;/center&gt;
          &lt;center&gt;&lt;form&gt;
            &lt;label for=&quot;fname&quot;&gt;Actual Year Built&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;&lt;/center&gt;
          &lt;center&gt;&lt;form&gt;
            &lt;label for=&quot;fname&quot;&gt;Email&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;&lt;/center&gt;
          &lt;center&gt;&lt;form&gt;
            &lt;label for=&quot;fname&quot;&gt;Date Inspected&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;&lt;/center&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;center&gt;&lt;button class=&quot;btn btn-info&quot; id=&quot;downloadPDF&quot;&gt;Download PDF&lt;/button&gt;&lt;/center&gt;
  
      &lt;script&gt;$('#downloadPDF').click(function () {
          domtoimage.toPng(document.getElementById('content2'))
              .then(function (blob) {
                  var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
  
                  pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
                  pdf.save(&quot;test.pdf&quot;);
  
                  that.options.api.optionsChanged();
              });
      }); &lt;/script&gt;
  </code></pre>
  <p>Here's the Javascript function (also shown at the end of the above code):</p>
  <pre><code>$('#downloadPDF').click(function () {
              domtoimage.toPng(document.getElementById('content2'))
                  .then(function (blob) {
                      var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
      
                      pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
                      pdf.save(&quot;test.pdf&quot;);
      
                      that.options.api.optionsChanged();
                  });
          });
  </code></pre>
  <p>I simply want a way to turn this interactive form into a PDF that's either downloadable or just emailed to a specific email address - I just don't know the most effective way to do this.</p>
  <p>Any and all help/recommendations would be deeply appreciated. Thanks!</p>