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

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

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

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

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

当前回答

A4尺寸为210x297mm

所以你可以用CSS设置HTML页面来适应这些大小:

html,body{
    height:297mm;
    width:210mm;
}

2014-03-01 12:49:09

其他回答

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

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
    <title>DIN A4 Page</title>
    <style type="text/css">
        @page { size: 21cm 29.7cm; margin: 2cm }
        p { line-height: 120%; text-align: justify; background: transparent }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. 
</p>
</body>
</html>

2020-06-26 13:44:30

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

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

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

2010-07-27 07:49:31

PPI and DPI make absolutely no difference to how a document will print off a browser. the printer takes no information on screen dot pitch or the DPI of the images etc. if you are printing images they would print at a size similar in proportion to how they are displayed on screen. the print processor of the browser would increase the DPI of the images from something rather low like 72dpi to whatever DPI the rest of the document is. say the image displays as half a page wide, then its about 4" wide physically. the pixel width of the image would be approx 300px to display correctly in the browser. by the time it prints at a nominal 300DPI, the processor has added pixels and the image will grow to around 1200px which at 300 DPI is 4".

当涉及到矢量或非基于像素的元素，如文本，打印机从驱动程序中选择自己的DPI，这与屏幕点间距或浏览器宽度无关。如果浏览器宽度为3000px，打印处理器将适当地换行文本。

heres what makes it hard about creating print displays: each browser and printer will interpret text sizes (pt, em, px) and spacing in its own way. depending on what printer, browser and maybe even OS you use, you will get a different amount of lines and characters per page. so even if you test on your computer using your browser and printer and figure out that you can display the text in a box at 640x900px and its perfect on print, the next guy who tries to print will possibly get it printing differently. there really is no way to force each printer and browser to get it identical each time.

忘记像素，更忘记DPI，你唯一可以使用像素的事情是设置一个表宽度，模拟打印机上可打印区域的宽度。在这种情况下，我发现640px宽是接近的。

2011-06-03 23:03: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页面?

推荐文章

最新文章

标签