print-css 只打印主体内容

Question

我一直是 css 的抵制采用者之一，但我认识到它们的用处，现在甚至是必要性。我遇到的问题是我的 print.css 做错了导致它 none- 功能。（也就是说，没有它和打印没有什么区别）

目标：我正在开发一个实用程序，用于将带有二维码的标签发送到标签打印机。我在 Python 中写这篇文章并找到迄今为止以我想要的格式呈现标签的最佳方法，就是使用一些 html.

html 我已经按照我想要的方式将标签呈现在屏幕上。然后我想将它发送到打印机。但是，我只希望打印标签以及必要的换行以充分推进标签卷以准备打印下一个标签。

我的想法是将我的页面大小定义为标签纸的周边，打印每个标签，然后将标签换页。

我想如果不是全部的话，我可以通过一些 JavaScript 将页面发送到打印机和一个 print.css 文件来格式化发送到打印机的页面来完成大部分工作.

我还没有尝试控制页面大小或强制新页面。我想先将数据打印在标签上，然后再调整其余部分。

下面是我的 html 和我的 print.css 文件。

我也在 html 中引用了一个 main.css，它是空白的，因为在 html 中进行了所有必要的格式化，但我运行似乎遇到了一些问题建议 main.css 对于 print.css 是必要的。这对我来说没有意义，但试图涵盖基础，因为我远不是 css.

方面的专家

我只想 print.css 删除不必要的页眉和页脚信息，只打印标签中的内容。

JavaScript 正在工作，但我无法让 css 影响到打印机的输出。我继续在左侧获得带有日期的页眉，右侧是网页名称，左侧是文件位置的页脚，左侧是页面 number/sequence。

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;
      } 
    }

编辑：更正了 html 标签 - KC

Answer 1

Header/footer/page 名称来自浏览器的默认打印设置。您需要在浏览器的打印对话框中更改它。它是页面本身的 而不是 的一部分，因此您的 CSS 没有控制它。

print-css 只打印主体内容

print-css Print Only the Body Content

html

javascript

print-css

html.page

print.css