如何制作一个A4纸大小的HTML页面?

我在谷歌上搜索“A4 CSS页面模板”(codepend .io)后看到了这个解决方案。它使用<page>标记在浏览器中显示A4 (A3,A5，也是纵向)大小的区域。在这个标记中显示内容，但绝对位置仍然相对于浏览器区域。

身体{ 背景:rgb (204204204); ｝页面{ 背景:白色; 显示:块; 保证金:0自动; margin-bottom: 0.5厘米; 箱影:0 0 0.5cm rgba(0,0,0,0.5); ｝页面(=“A4大小){ 宽度:21厘米; 高度:29.7厘米; ｝布局页面(大小= " A4 "][=“肖像”]{ 宽度:29.7厘米; 高度:21厘米; ｝ @media print { 正文，页{ 保证金:0; 不必:0; ｝｝ <页面大小= >“A4 A4页面< / > <page size="A4" layout="portrait">A4 portrait</page>

这适用于我没有任何其他css/js库包括在内。适用于当前的浏览器(IE, FF, Chrome)。

2017-03-26 09:04:26

从技术上讲，您可以这样做，但是要让所有浏览器打印出与屏幕上显示的一模一样的页面，需要做很多工作。而且，大多数浏览器强制在打印结果上输入URL、打印日期和页码，这并不总是理想的。这不能被改变或禁用。

相反，我建议根据屏幕上的内容创建一个PDF，并将PDF提供给下载和/或打印。虽然大多数可用的PDF库都是付费的，但也有一些免费的替代方案可用于创建基本的PDF。

2010-07-27 07:40:45

为每一页创建节，并使用下面的代码来调整页边距、高度和宽度。

如果你打印的是A4尺寸。

然后用户

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
}

然后创建一个包含所有内容的div。

<div class="Section1"> 
    type your content here... 
</div>

or

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

2013-01-31 08:28:18

我在谷歌上搜索“A4 CSS页面模板”(codepend .io)后看到了这个解决方案。它使用<page>标记在浏览器中显示A4 (A3,A5，也是纵向)大小的区域。在这个标记中显示内容，但绝对位置仍然相对于浏览器区域。

身体{ 背景:rgb (204204204); ｝页面{ 背景:白色; 显示:块; 保证金:0自动; margin-bottom: 0.5厘米; 箱影:0 0 0.5cm rgba(0,0,0,0.5); ｝页面(=“A4大小){ 宽度:21厘米; 高度:29.7厘米; ｝布局页面(大小= " A4 "][=“肖像”]{ 宽度:29.7厘米; 高度:21厘米; ｝ @media print { 正文，页{ 保证金:0; 不必:0; ｝｝ <页面大小= >“A4 A4页面< / > <page size="A4" layout="portrait">A4 portrait</page>

这适用于我没有任何其他css/js库包括在内。适用于当前的浏览器(IE, FF, Chrome)。

2017-03-26 09:04:26

强制web浏览器以与A4相同的像素尺寸显示页面是相当容易的。然而，在渲染时可能会有一些怪癖。

假设你的显示器显示72 dpi，你可以添加如下内容:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

2010-07-27 07:44:48

寻找类似的问题，我发现这个- http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4是一种文档格式，作为屏幕图像，这取决于图像的分辨率，例如A4文档调整为:

72 dpi (web) = 595 X 842像素 300 dpi(打印)= 2480 X 3508像素 (这是我所知道的“A4”。210mm X 297mm @ 300 dpi) 600 dpi (打印)= 4960 X 7016像素

2012-02-03 22:36:41

如何制作一个A4纸大小的HTML页面?

推荐文章

最新文章

标签