最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I dynamically add page breaks in jspdf, to prevent tables from breaking across two pages? - Stack Overflow

programmeradmin4浏览0评论

I am trying to create a web page that exports database information into a PDF, with tables that pull from a database with PHP and MySQL.

My tables have variable length, and can at times include more than one table, potentially up to 3+ tables.

In the case that the initial table would take up a large amount of space on a page, that the second table would break across to subsequent pages, how would I tell jspdf to go back to previous <table> tag, and insert a -page break- before it? (i.e. if any row of table 2+ would break and move to the next page, move the entire table to the next page).

I've considered trying to crawl and count the <tr> tags to get a count, and trying to set an if-else statement to send the table to the next page, but I don't know how that would work for more than two tables.

<script>
  //this my current idea of the code, none of it is implemented or tested
  $(document).on('load', function(e) { //when the pages loads, execute this function
    var PDF_WIDTH = 816;
    var PDF_HEIGHT = (PDF_Width * 1.2941); //for a 8.5*11 Letter sized pdf
    var rowCount = 0;
    var tableCount = 0;

    $(tr).each(function(e) { //counts all the rows that exists on the page
      var rowCount++;
    });

    $(table).each(function(e) { //counts all the tables that exist on the page
      var tableCount++;
    });

    if (rowcount > 36) { //if the total number of rows would exceed the amount of rows displayed on the page
      var pdf = new jsPDF('p', 'pt' [PDF_WIDTH, PDF_HEIGHT]);
      //??? trying to select the table that would break 
      //??? add a page break before the second table
      //alternatively append a page break after the first table
    }
  });
</script>

I am trying to create a web page that exports database information into a PDF, with tables that pull from a database with PHP and MySQL.

My tables have variable length, and can at times include more than one table, potentially up to 3+ tables.

In the case that the initial table would take up a large amount of space on a page, that the second table would break across to subsequent pages, how would I tell jspdf to go back to previous <table> tag, and insert a -page break- before it? (i.e. if any row of table 2+ would break and move to the next page, move the entire table to the next page).

I've considered trying to crawl and count the <tr> tags to get a count, and trying to set an if-else statement to send the table to the next page, but I don't know how that would work for more than two tables.

<script>
  //this my current idea of the code, none of it is implemented or tested
  $(document).on('load', function(e) { //when the pages loads, execute this function
    var PDF_WIDTH = 816;
    var PDF_HEIGHT = (PDF_Width * 1.2941); //for a 8.5*11 Letter sized pdf
    var rowCount = 0;
    var tableCount = 0;

    $(tr).each(function(e) { //counts all the rows that exists on the page
      var rowCount++;
    });

    $(table).each(function(e) { //counts all the tables that exist on the page
      var tableCount++;
    });

    if (rowcount > 36) { //if the total number of rows would exceed the amount of rows displayed on the page
      var pdf = new jsPDF('p', 'pt' [PDF_WIDTH, PDF_HEIGHT]);
      //??? trying to select the table that would break 
      //??? add a page break before the second table
      //alternatively append a page break after the first table
    }
  });
</script>

Share Improve this question edited Jun 2, 2019 at 10:03 double-beep 5,51919 gold badges40 silver badges49 bronze badges asked May 29, 2019 at 17:54 Damian MorrisDamian Morris 611 gold badge1 silver badge6 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

you should try jspdf autotable plugin. https://github./simonbengtsson/jsPDF-AutoTable and look at the examples for multiple tables

I was in the same situation. Set 'rowPageBreak' option to 'avoid' and

  • The table splits
  • A new page is added
  • The extra rows flows to the new page

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论