是否有打印html表背景的技巧？

Question

Suppose, I create a calendar as HTML table where different cells have different background color and different text. It looks nice on screen.

I realized that it is not possible to print this table preserving the cell's background color. Instructing my viewers to tweak their browsers to print the calendar is just ridiculous.

Is there any trick to print HTML table as you see it on screen? Maybe it is possible to somehow transform it to image, or something?

---

Here is a solution that I came up with.
Below is an illustration of creating printable 3x2 board, with 100pt x 100pt cells. I simplified the fragment as much as possible. Main idea: every cell has an image that is overlayed by text. This is much more slower than having simple background color, but allow having single codebase for screen and printing.
You can get rid of inner spacing with additional styling.

<table style="table-layout:fixed; width:300pt; height:200pt; border-collapse:collapse; line-height: 0;">
    <tr>
        <td>
        <img src="Content/images/backTab.png" style="width:100pt; height:100pt; position:relative; z-index:0" />
        <div style="position:relative; top:-50pt; z-index:1; color:Red; text-align:center; ">Text</div>
        </td>

I'm new in Web development and I found the whole situation being ridiculous. Thousands developers crying about printing of background color/image but nobody cares. I have looked at W3C HTML/CSS/Printing standards. There is nothing there about suppressing backgrounds on printing. If browsers make decision to save user's ink, there must be CSS style to explicitly enforce the background printing. In this case there will be no stupid difficulties to show and print chess board, or crossword puzzle, or calendar.

If anyone has connections in W3C, please, let them know.

Answer 1

You can create a css file and specify it in the html that it should be used for printing:

http://www.alistapart.com/articles/goingtoprint/

However, settings such as printing it as you see it on the screen require settings to be changed in the web browsers print settings.

Unfortunately there is no way around this without a custom solution.

You can play with Prototype Javascript and assign the HTML to canvas element which will create an image on the client side.

http://prototype-graphic.xilinus.com/

Hope this helps,

Jeffrey Kevin Pry

Answer 2

Couldn't you use 10x10 images with the background color you're thinking of and have them set to repeat across the background using CSS? (Fixed color images are very easily compressible and tend to be small, don't worry about the size as pointed out in the comments).

Answer 3

Also, in addition to my comment you can try to use: http://iecapt.sourceforge.net/ update: Also, this article probably can be helpful. http://www.codeproject.com/KB/graphics/html2image.aspx