Printing a Hot

Tags: #<Tag:0x00007efc62513aa0>
#1

I am having issues trying to print a Hot on a page.

Before I go any further, how is the Hot CSS intended to be included, with regard to media? I took the code from https://docs.handsontable.com/0.25.0/tutorial-quick-start.html (seemed reasonable…), which has:

<link rel="stylesheet" media="screen" href="/dist/handsontable.full.css">

Note the media="screen". However, most of the example JSFiddles I see here do not specify a media attribute. Then again, they are not concerned with printing.

Since the issues I am looking at differ depending on whether handsontable.full.css is or is not intended to be applied only for media="screen", could someone please clarify?

#2

Hi @jon
I think that you’re getting the same result as described here:

#3

Hi @aleksandra_budnik,

Yes, but does not answer my exact question in itself.

The example you show in the Issue arises when you do have media=print and the Hot has either colHeaders or rowHeaders. In fact, it’s a little worse than that shows, there are actually 3 problems. Put a Hot with both switched on in a page of its own, a little way down from the top of the page, and click any browser’s “Print preview…” (it doesn’t show up in a JSFiddle, presumably something to do with how that has several window panes). You will see:

  1. You get the “doubled” col/row headers, as per your example.
  2. If you look at the top-left of the page, you also get a third occurrence of the col & row headers there too.
  3. If you make the col/rowHeaders be an array of strings, it seems to lose that and always prints the default letter/digit for the col/row.

My question was:

  • Do you intend that Hots should print with the existing handsontable.full.css, and therefore <link rel="stylesheet" href="/dist/handsontable.full.css"> should not have media="screen" in it (which is what most posts seem to show people are doing)? This displays the col/rowHeaders with their backgrounds, although this has its own issues.
  • Or, do you intend, as per the documentation page, that that CSS file is only suitable for screen, so the link should have media="print" and so for print it should not apply, col/rowHeaders come out without a background, and you just need to fix the bugs?

I am surprised this has not come up till now. Since printing is important I cannot deliver without this working. Do you have any idea how soon this Issue is liable to be fixed?

Thank you so much.

#4

Yes, you are right @jon there are some other related issues.

Here’s the only tutorial related to styling: https://docs.handsontable.com/pro/1.4.0/tutorial-styling.html and we do not write about the print version of CSS. I guess we should add this kind of information.

#5

I think you should follow the steps given by hp support assistant and there are lots of information about the print version of CSS.

#6

I am facing an issue while printing hot using iframe concept.
Ref : https://jsfiddle.net/handsoncode/bxn4sd2k/.
It works for normal hot but not working for nested headers, it wont print nested headers.
Ref : https://jsfiddle.net/Lw26f58q/
Thank you so much in Advance.

#7

Hi @mithunsbhonsle

Thank you for contacting us. I’m afraid there’s not much that can be done to overcome this issue, as nested headers are complex structure and there won’t be an easy way to properly translate them to printable format as internal Handsontable styling sheet isn’t optimized for printing.

#8