Skip to content

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