Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support css parsing of individual borders sides #1003

Merged
merged 2 commits into from
Oct 10, 2023
Merged

Support css parsing of individual borders sides #1003

merged 2 commits into from
Oct 10, 2023

Conversation

mmghv
Copy link
Collaborator

@mmghv mmghv commented Oct 10, 2023 •
edited
Loading

Fixes #915

Individual borders sides (lineWidth as an object) was introduced in #730 but support was never added to the css parser so only borderTopWidth was used to set lineWidth as a number, this PR adds the missing support.

Example code (border-bottom) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test PDF</title>
    <style>
      body {
        margin: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      #output {
        width: 100%;
        flex-grow: 1;
      }
      table {
        border-collapse: collapse;
        margin: 10px 60px;
      }
      td, th {
        text-align: center;
        border-bottom: solid 1px red;
      }
    </style>
  </head>

  <body>
    <table id="table">
      <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
      </thead>
      <tbody>
        <tr>
          <td>David</td>
          <td>david@example.com</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Castille</td>
          <td>castille@example.com</td>
          <td>Spain</td>
        </tr>
      </tbody>
    </table>
    <object id="output" type="application/pdf"></object>
    <script src="../libs/jspdf.umd.js"></script>
    <script src="../../dist/jspdf.plugin.autotable.js"></script>
    <script>
      const { jsPDF } = window.jspdf
      const doc = new jsPDF()
    </script>
    <!-- =============================================================================== -->
    <script>
      doc.autoTable({
        html: '#table',
        useCss: true,
      })
    </script>
    <!-- =============================================================================== -->
    <script>
      document.getElementById('output').data = doc.output('datauristring')
      console.log(doc.lastAutoTable)
    </script>
  </body>
</html>

Before

image


After

image

@mmghv mmghv requested a review from simonbengtsson October 10, 2023 14:11
@mmghv mmghv marked this pull request as draft October 10, 2023 14:12
simonbengtsson
simonbengtsson approved these changes Oct 10, 2023
View reviewed changes
Copy link
Owner

@simonbengtsson simonbengtsson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! I think we might be able to always use the object assignment? Ie potentially we don't need the check for if alö widths are the same.

@mmghv
Copy link
Collaborator Author

mmghv commented Oct 10, 2023 •
edited
Loading

We can but this is a a performance shortcut when all the sides are equal (rectangle cell) which is most of the usecases, then we set lineWidth as a number so the border and background gets drawn with one command using rect() and not adding the overhead of 5 calls (4 sides + background) beside it will always look better when the borders are represented with one command (1 continues rect vs 4 separate lines).

P.S. I'm fixing the tests, will mark as ready when finished.

@mmghv mmghv force-pushed the css-border-object branch 2 times, most recently from c836a93 to cc4e61c Compare October 10, 2023 15:20
@mmghv mmghv force-pushed the css-border-object branch from cc4e61c to ad75c1a Compare October 10, 2023 15:22
@mmghv mmghv marked this pull request as ready for review October 10, 2023 15:22
@mmghv
Copy link
Collaborator Author

mmghv commented Oct 10, 2023

Ready for merging, I think this is enough fixes for v3.7.0 to be tagged, @simonbengtsson What do you think?

@simonbengtsson
Copy link
Owner

Make sense with the lines and releasing v3.7. Will submit it right away.

@simonbengtsson simonbengtsson merged commit 543a2e9 into master Oct 10, 2023
@mmghv mmghv deleted the css-border-object branch October 10, 2023 16:26
@Faisalginims Faisalginims mentioned this pull request Jun 20, 2024
Open
@santiagoSS99 santiagoSS99 mentioned this pull request Sep 12, 2024
Closed
@veenone veenone mentioned this pull request Sep 30, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@simonbengtsson simonbengtsson simonbengtsson approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Option useCss in combination Bootstrap v5 results in no pdf borders between rows
2 participants
@mmghv @simonbengtsson