0

I want to convert div#printableArea into a PDF. The code works and a file is downloaded successfully. When I open the file it has nothing but undefined in it. I can't seem to find the solution. Can you guys help? Thanks.

This is the js file loaded:

<script src="form_html.js"></script>
<script src="split_text_to_size.js"></script>
<script src="standard_fonts_metrics.js"></script>
<script src="canvas.js"></script>
<script type="text/javascript" src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script>         
    function demoFromHTML() {
        var pdf = new jsPDF();
        var source = $('#printableArea').first();
        var specialElementHandlers = {
            '#bypassme': function(element, renderer) {
                return true;
            }
        };

        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };

        pdf.fromHTML(
            source.get(), // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, // y coord
            {
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },
            function (dispose) {
                // dispose: object with X, Y of the last line add to the PDF
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            },
            margins
        )
    }
</script>

<div id="printableArea">
    <table>
        <tr>
            <td>
                My contents...
            </td>
        </tr>
    </table>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
xtru1990
  • 59
  • 8
  • Try `$('#printableArea').html()` instead of `source.get()`. – Rory McCrossan Jul 18 '15 at 13:57
  • or `source[0]` will return dom element or `get(0)`. get() will return collection array – charlietfl Jul 18 '15 at 14:01
  • See http://stackoverflow.com/questions/30135765/save-a-pre-element-as-pdf-with-css – guest271314 Jul 18 '15 at 14:23
  • @RoryMcCrossan: no it dosen't ... click dosen't give any event after that... first it used to download now its just clicks... on consoleLog i can see demoFromHtml is not defined error.... – xtru1990 Jul 18 '15 at 15:04
  • @charlietfl same error occurred as Rory's solution.. – xtru1990 Jul 18 '15 at 15:05
  • what download? Is there some ajax involved here? If so need to make sure element exists before trying to get the html from it. – charlietfl Jul 18 '15 at 15:08
  • @guest271314 no that was not what i was looking for but thanks for the knowledge... good code is never a waste.. – xtru1990 Jul 18 '15 at 15:13
  • @charlietfl no i meant... a file named Test.pdf was saving before i changed my code as u suggested... after the change there was nothing ... and no ajax is involved here... – xtru1990 Jul 18 '15 at 15:27
  • can't help you much more... I use server to do pdf most of the time – charlietfl Jul 18 '15 at 15:29
  • @charlietfl i just need a button saying "Save as PDF" and when user clicks a document is saved as documentname.pdf do u have any other ideas i can solve this issue.... Thank you very much for help anyways :) – xtru1990 Jul 18 '15 at 15:32

1 Answers1

0

I don't know if you want only first child to be printed. I needed the whole div so tried with following code (Replace #container with required part):

      var pdf = new jsPDF('p', 'pt', 'a4');
      var source = $("#container").html();

      specialElementHandlers = {
          // element with id of "bypass" - jQuery style selector
          '#noprint': function (element, renderer) {
              // true = "handled elsewhere, bypass text extraction"
              return true;
          }
      };

      pdf.fromHTML(
        source, 20, 20, { 'width': 150,
            'elementHandlers': specialElementHandlers
       },

      function (dispose) {
            // dispose: object with X, Y of the last line add to the PDF 
            //          this allow the insertion of new lines after html
            pdf.save('Test.pdf');
      }, margins);

Please let me know if it works or doesn't work. Thanks!

Prasanna J
  • 1
  • 1