0

我正在尝试将 html 页面格式化为法庭诉状，需要在 8.5 x 11 的纸上整齐地打印。我希望将其指定为 HTML，但是当我进行打印时，包含内容的容器会扩展到正文之外。

我尝试为容器设置一个特定的宽度以匹配主体，但这没有奏效。

我用 HTML 和 CSS 创建了一个小提琴：

在这里看小提琴

这是 BODY 和 CONTAINER 的 CSS：

body {
    width: 8.5in;
    height: 11in;
    padding-left: 1.5in;
    padding-right: .5in;
    margin: 0;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.container {
    border-left: 2px solid black;
    border-right: 2px solid black;
    width: 8.5in;
    margin: 0;
    padding: 5px;
    height: 100%;
}

如果您单击结果底部的“打开打印预览”文本，然后尝试打印，您可以在 Chrome 的打印预览窗口中看到文档的变化情况。

此应用程序旨在专门在 Chrome 中运行。我正在尝试生成一个类似于以下内容的文档，其中灰色的细线表示页面的边缘：

在此处输入图像描述

4

1 回答 1

1

我不确定这是您正在寻找的解决方案。我在不同浏览器的打印预览功能中测试了您的代码 ，发现了不同的结果。然后我坚持使用谷歌浏览器并进行相应的编码。

我发现你使用了两次相同的代码，所以它不能正常工作！我将其他代码用于screen only. 并将以下代码更改为print

 @media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }

    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 100%;
        margin: 0;
        padding: 5px;
        height: 100%;
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
        padding-left: 1.5in;
        padding-right: .5in;
    }
}

在我的代码中，我删除了textarea，而是放置了一个<p>具有可编辑功能的标签。请查看代码并让我知道您的意见。

这就是我在 Google Chrome 中的内容。

在此处输入图像描述

我尝试了几个选项，但没有找到任何合适的选项！但这一个很棘手！只需将以下代码用于printCSS。请替换并测试此代码。

@media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        padding-left: 1.5in;
        padding-right: .5in;
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }
    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 6.5in;
        margin: 0 auto;
        padding: 10pt 36pt;
        /* height: 100%; */
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
    }
}

之后我在谷歌浏览器中使用了自定义边距（虽然我没有打印它！所以你最好测试它的最终输出）。 在此处输入图像描述

希望这将满足您的需求！:)

于 2019-05-31T19:44:27.140 回答