jsPDF正在下载EMPTY PDF

Question

I have a content div with the id as "divDownload". In the content div I have a panel which has some repeaters and some tables and labels and so on. I want to download that div as a pdf when user click on download button. For this purpose i'm using jsPDF Library. But it is downloading empty PDF.

HTML page:

<asp:Button ID="btnDownload" runat="server" Text="Download" />

<div id="divDownload">
    <asp:Panel ID="pnldownload" runat="server">
        // repeaters 
        //tables 
        //labels
    </Panel>
</div>

<div id="noprint"></div>

JavaScript function:

  $(document).ready(function () {
      $("#<%= btnDownload.ClientID %>").click(function (e) {

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

          alert(source);
          specialElementHandlers = {
              // element with id of "bypass" - jQuery style selector
              '#noprint': function (element, renderer) {
                  // true = "handled elsewhere, bypass text extraction"
                  return false;
              }
          };
          pdf.fromHTML(
          source,
          15,
          15, {
              'width': 150,
              'elementHandlers': specialElementHandlers
          });
          pdf.save('test.pdf');


      });
  });

Can some one please help me how to solve this one? Searched a lot and tried different ways in StackOverFlow, but no luck.

Answer 1

I have used:

var source = $("#divDownload").html;

Also I have used true for #noprint .

Hope it helps you!

Answer 2

I tried again and the following is complete code:

      var pdf = new jsPDF('p', 'pt', 'a4');
      var source = $("#divDownload").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. Enjoyed solving this issue! Thanks!

Answer 3

@Abhi,

jsPdf works with html tables.

Therefore you have to provide an id of a html table and not a div as you are trying. Try with a html table.

Hope it helps.