javascripthtmlprint-css

print-css Print Only the Body Content

I have been one of the resistant adopters of css, however I recognize the usefulness and now even the necessity of them. The issue I am having is that I am doing something wrong with my print.css that is causing it to be none-functional. (this is to say, no different than printing without it)

The Goal: I'm developing a utility to send labels with QR code to a label printer. I am writing this in Python and finding the best way so far to render the label in the format I want it, is to do so with some html.

Label Format

The html I have renders the label just as I wanted it to the screen. I then want to send it to the printer. However, I want ONLY the label to be printed along with the necessary line feeds to advance the label roll sufficiently to be ready to print the next label.

My thought with this was to define my page size to the perimeter of the label stock, print each label, and then form feed the label.

I figured that most if not all of this I could accomplish with a bit of JavaScript to send the page to the printer and a print.css file to format the page being sent to the printer.

The I have not gotten into trying to control the page size or the forcing of a new page. I wanted to get the data printed on the label first, and then tweak the rest.

Below are my html and my print.css file.

I am also in the html referencing a main.css, which is blank as all necessary formatting is happening in the html, but somethings I ran across seemed to suggest that a main.css was necessary for a print.css. That did not make sense to me but was trying to cover the bases because I am far from an expert in css.

I just want the print.css to remove the unnecessary header and footer information and print ONLY the content in the tag.

JavaScript is working, but I cannot get the css to affect the output to the printer. I continue to get a header with date on the left web page name on the right and footer with file location on the left and page number/sequence on the left.

html.page

    <html>
        <head>
            <link rel="sytlesheet" href="main.css" />
            <link rel="stylesheet" media="print" href="C:\users\download\py\blabel\print.ccs" />
        </head>

        <body>
            <span class='label'>
                <table style="float: left">
                    <tr>
                        <td><img src="famous-joke.png"></td>
                    <tr>
                </table>

                <table style="float: left">
                    <tr>
                        <td style = "font-variant:small-caps; font-size:small; text-align:right;">prod #: </td>
                        <td style = "font-size:large; text-align:left;">64312345<br></td>
                    </tr>
                    <tr>
                        <td style = "font-variant:small-caps; font-size:small;text-align:right;">q/pt #: </td>
                        <td style = "font-size:large; text-align:left;">Q-FRONT LEFT TIRE<br></td>
                    </tr>
                    <tr>
                        <td style = "font-variant:small-caps; font-size:small; text-align:right;">desc: </td>
                        <td style = "font-size:large; text-align:left;">Tire front left</td>
                    </tr>
                </table>
            </span>
            <script javascript>
                window.print()
            </script>
        </body>
    </html>

print.css

    @media print {
       #header, #navbar, #navbar, #toolbar, #footer, .title {
       display:none !important;
      } 
    }

EDIT: Corrected the html tags - KC

Solution

  • Header/footer/page name are coming from the browser's default print settings. You need to change it in the browser's print dialog. It is not part of the page itself, so your CSS is not controlling it.