如何将打印尺寸设置为特定尺寸（以英寸为单位）？

问题描述 投票：0回答：1

我需要在信纸尺寸的纸张上打印 3x5 索引卡尺寸的 div 内容（根据转换网站 - 3" = 288px 和 5" = 480px）。使用以下 CSS 时，它以适当的 DIV 为目标，但（显示的打印预览和实际打印的）尺寸远小于指定的 3x5（或 288px x 480px）。

@media print {
    @page {
        size: letter;
    }

    body {
        visibility: hidden;
    }

    #section-to-print {
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 288px; /* I've also tried width: 3in; */
        height: 480px; /* I've also tried width: 5in; */
    }
 }

虽然我希望将其打印在信纸尺寸的纸张上，但我也尝试将

@page
尺寸设置为
size: 3in 5in;
和
size: 288px 480px;
，但这些也不起作用 - 这些产生与
size: letter;
，
size: letter portrait;
相同的结果，和
size: letter landscape;
。

如果您能提供任何帮助，我们将不胜感激，并感谢您的宝贵时间。保重，祝你有美好的一天。

如果需要，这里是我的 HTML（Razor 页面）及其相应 CSS 的淡化版本：

HTML（剃刀页面）：

@page
@model ExampleProject.Pages.IndexCardModel
@{
    ViewData["Title"] = "Index Card Print-Out";
    ViewData["ContentBGColor"] = "#FFF";
}


<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>INDEX CARD EXAMPLE</title>

    <link href="~/css/indexcard.css" rel="stylesheet" />

</head>
<body>

    <div class="indexcard-config-3x5-portrait" id="section-to-print">

        <h3 class="indexcard-title">HEADER</h3>

        <div class="ic-table">
            <label>Form Here</label>
        </div>

        <div class="ic-table">
            <label>Table Here</label>
        </div>

        <div class="footer">
            <label class="footer">&#x2610; Notes on back &#x2192;</label>
        </div>

    </div>

</body>
</html>

CSS：

:root {
    --background-color: #FFF;
    --font-color: #000;
    --font-type: Calibri;
    --font-size: .75rem;
}

label {
    font-weight: 500;
    margin-top: .5rem;
    font-size: var(--font-size);
    align-self: end;
}

h3 {
    justify-self: center;
    grid-area: header;
    text-align: center;
    background-color: var(--font-color);
    color: var(--background-color);
    padding: .25rem 0;
    letter-spacing: .65rem;
    font-size: calc(var(--font-size)+.5rem);
}

.indexcard-config-3x5-portrait {
    width: 288px;
    height: 480px;
    padding: .25rem;
    border: 1px solid var(--font-color);
    background-color: var(--background-color);
}

.ic-table {
    margin: .5rem;
    width: 2.75in;
    height: 2in;
    border: 1px solid #000;
    align-content: center;
    text-align: center;
    background-color: #ffec86;
    color: #00F;
}

.footer {
    float: right;
    font-size: 1rem;
    margin: 0 .5rem 0 0;
}


@media print {
    @page {
        size: letter;
    }

    body {
        visibility: hidden;
    }

    #section-to-print {
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 288px; /* I've also tried width: 3in; */
        height: 480px; /* I've also tried width: 5in; */
    }
 }
html css
1个回答
0
投票

我终于弄清楚我的问题了。该组织使用基于浏览器的安全解决方案，该解决方案在打印时应用额外的 CSS，这是我问题的根本原因。

感谢任何审阅我的帖子、研究此问题和/或回复的人。

保重，祝你有美好的一天。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.