Question

我需要在HTML中制作一个应该是A4尺寸的报告。它需要页眉和页脚。当然这可以用css做到吗？

有没有人为此提供任何示例或示例代码？

我用谷歌搜索和代码片段我得到所有谈论媒体查询，他们不工作..

所以基本上它是用于打印目的，生成的html将转换为PDF文档。我正在使用MVC4并找到了一个将视图转换为PDF的工具。视图只是纯HTML。所以我想为什么不用HTML来代表输出报告，然后用PDF格式化。

所以我需要能够有一个页眉和一个页脚（页面底部），然后在两个中间内容

我尝试使用以下代码，但它似乎不起作用..

<html>
<head>
    <style type="text/css" media="all">
        @page {
            size: A4 portrait; /* can use also 'landscape' for orientation */
            margin: 1.0in;
            border: thin solid black;
            padding: 1em;

            @bottom-center {
                content: element(footer);
            }

            @top-center {
                content: element(header);
            }
        }

        #page-header {
            display: block;
            position: running(header);
        }

        #page-footer {
            display: block;
            position: running(footer);
        }

        .page-number:before {
            content: counter(page); 
        }

        .page-count:before {
            content: counter(pages);  
        }
    </style>
</head>

<body>
    <div id="page-header">
        <p>Header text</p>
    </div>

    <div id="page-footer">
        <p>Footer text</p>
        <p>Page <span class="page-number"/> of <span class="page-count"/></p>
    </div>

    <div id="page-content">
        <p>Page 1.</p>

        <p style="page-break-after:always;"/>

        <p>Page 2.</p>
    </div>
</body>
</html>

Answer 1

CSS可用于将宽度/高度设置为实际大小;例如，在print.css文件中：

div.A4 {
  width: 21 cm;
  height: 29.7 cm;
  margin: 0;
}

然而，HTML / CSS实际上不是为了这个目的;媒体查询确实是处理此问题的最佳方式。我真的建议你多花一点时间让他们工作;如果您计划不止一次使用本网站，那值得花时间。

Answer 2

为什么A4尺寸？用于打印目的？如果出于打印目的，您甚至不必担心它。为此目的使用CSS。如果您的html元素显示为块元素（默认值），并且您没有指定任何宽度或高度，那么当您尝试打印时，html文档将调整为打印机设置文档。如果您需要调整任何css设置进行打印，请使用css media queries

如果与打印无关，请忽略此答案，但在帖子中提供更多详细信息，以便我们提供正确的解决方案。

希望它有意义

利奥

我需要用HTML创建一个A4大小的报告，我该怎么做？

2 个答案: