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.

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

Allow for rows before json header for detailed date headers #573

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ZoharLiran
Copy link

This feature adds the ability to add rows to json table header.
Could be used for a display of date grids like shown in the attached picture, and provides the benefit of repeating on all pages printed.

Usage:

printJS({
        printable: data,
        rowsBefore: '<tr><th colspan=2>xxxxxx</th></tr>',
        properties: [
          {
            field: 'test1',
            displayName: 'test 1',
            columnSize: 1
          },
          {
            field: 'test2',
            displayName: 'test 2',
            columnSize: 4
          }
        ],
        type: 'json',
        header: 'JSON Print Test',
	documentTitle: 'Print.js JSON Test'
})

Screen Shot 2021-06-24 at 12 26 41 PM

@hyemhappy
Copy link

hyemhappy commented Jan 16, 2025

Oh! Thank you. It helped me a lot!
Please refer to this code, too

<html>
  <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css" type="text/css">
  <script src='https://printjs-4de6.kxcdn.com/print.min.js'></script>
  <script type="text/javascript">
    function printStyledJson() {
      let data = [
        {
          test1: 'Test1 string',
          test2: 'Test2 string'
        },
        {
          test1: 'more Test1 string',
          test2: 'more Test2 string'
        },
        {
          test1: 'more Test1 string',
          test2: 'more Test2 string'
        },
        {
          test1: 'more Test1 string',
          test2: 'more Test2 string'
        },
        {
          test1: 'more Test1 string',
          test2: 'more Test2 string'
        },
        {
          test1: 'more Test1 string',
          test2: 'more Test2 string'
        },
        {
          test1: 'more Test1 string',
          test2: 'more Test2 string'
        }
      ]
      const style ="@page:first { margin-top: 1in; margin-bottom: 1in;}@page { margin-top: 1.2in; margin-bottom: 1in; @top-center { content: 'Header for first page'; font-size: 24px; }@top-left { content:'2025-01-16'; font-size: 13px;} @top-right { content:'Test';font-size: 13px;} @bottom-left { content: ' [ SUM ]'; } @bottom-right { content: ' Footer for first page'; }} @media print {} table.header {} "

      printJS({
        printable: data,
        style: style,
        scanStyles: false,
        properties: ['test1', 'test2'],
        type: 'json',
        gridStyle: 'border: 2px solid #3971A5;height: 240px;line-height:220px;',
		gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;height: 40px;line-height:40px;',
		repeatTableHeader : true
      })
    }
  </script>
  <body>
    <section id="test" class="test">
      <h1>Print.js Test Page</h1>
      <p>
        <button onClick='printStyledJson();'>
          Print Styled JSON
        </button>
        </div>
        <div>
        </div>
      </div>
    </section>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants