0

我一直是 css 的抵制采用者之一,但我认识到它们的有用性,现在甚至是必要性。我遇到的问题是我的 print.css 做错了什么,导致它无法正常工作。(也就是说,与没有它的打印没有什么不同)

目标:我正在开发一个实用程序,用于将带有二维码的标签发送到标签打印机。我正在用 Python 编写此代码,并找到迄今为止以我想要的格式呈现标签的最佳方法,即使用一些 html。

标签格式

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

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

我认为,如果不是全部的话,我可以通过一些 JavaScript 将页面发送到打印机并使用 print.css 文件来格式化发送到打印机的页面。

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

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

我也在引用 main.css 的 html 中,它是空白的,因为所有必要的格式都发生在 html 中,但我遇到的一些事情似乎表明 main.css 对于 print.css 是必需的。这对我来说没有意义,但试图覆盖基础,因为我远非 css 专家。

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

JavaScript 正在工作,但我无法让 css 影响打印机的输出。我继续在右侧获取左侧网页名称的标题和左侧的文件位置和左侧的页码/序列的页脚。

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>

打印.css

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

编辑:更正了 html 标签 - KC

4

1 回答 1

0

页眉/页脚/页面名称来自浏览器的默认打印设置。您需要在浏览器的打印对话框中更改它。它不是页面本身的一部分,因此您的 CSS 无法控制它。

于 2020-03-13T17:30:03.690 回答