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

是否有可能使一个HTML页面的行为，例如，像一个a4大小的页面在MS Word?

实际上，我希望能够在浏览器中显示HTML页面，并以A4大小页面的尺寸概述内容。

为了简单起见，我假设HTML页面只包含文本(没有图像等)，例如，不会有<br>标记。

另外，当HTML页面被打印出来时，它将显示为a4大小的纸质页面。

当前回答

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

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

2010-07-27 07:40:45

其他回答

完全可以将布局设置为a4页面的比例。你只需要设置相应的宽度和高度(可能检查窗口。innerHeight和window。虽然我不确定这是否可靠)。

The tricky part is with printing A4. Javascript for example only supports printing pages rudimentarily with the window.print method. As @Prutswonder suggested creating a PDF from the webpage probably is the most sophisticated way of doing this (other than supplying PDF documentation in the first place). However, this is not as trivial as one might think. Here's a link that has a description of an all open source Java class to create PDFs from HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

显然，一旦你创建了一个A4比例的PDF打印，它将导致一个干净的A4打印页面。这是否值得投入时间是另一个问题。

2010-07-27 08:21:50

我使用HTML生成报告，在真实的纸张上正确地打印出真实大小。

如果你小心地使用mm作为CSS文件中的单位，你应该是OK的，至少对于单页。不过，人们可以通过改变浏览器中的打印缩放来搞砸你。

我似乎记得我所做的每一件事都是单页的，所以我不必担心分页——那可能要困难得多。

2010-07-27 07:49:31

I know that this subject is quite old but I want to share my experience about that topic. Actually, I was searching a module that can help me with my daily reports. I'm writting some documentations and some reports in HTML + CSS (instead of Word, Latex, OO, ...). The objectif would be to print them on A4 paper to share it with friends, ... Instead of searching, I decided to have a small funny coding session to implement a simple lib that can handle "pages", page number, summary, header, footer, .... Finally, I did it in ~~2h and I know that's not the best tool ever but it's almost ok for my purpose. You can take a look at this project on my repo and don't hesitate to share your ideas. It's maybe not what you are searching for at 100% but I think that this module can help you.

基本上我创建了一个页面的主体“宽度:200mm;”和容器的高度:290mm(小于A4)。然后我使用了page-break-after: always;因此，浏览器的“打印”选项知道何时拆分页面。

回购:https://github.com/kursion/jsprint

2013-09-24 16:55:02

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

如果你打印的是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>

@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

强制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

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

推荐文章

最新文章

标签