div 设置a4大小_如何在A4纸张尺寸页面中制作HTML页面?

是否可以使HTML页面的行为类似于MS Word中的A4大小的页面?

本质上,我希望能够在浏览器中显示HTML页面,并以A4尺寸页面的尺寸概述内容。

为了简单起见,我假设HTML页面仅包含文本(没有图像等),并且没有例如
标记。

另外,当打印HTML页面时,它将以A4尺寸的纸页形式出现。

#1楼

在每个页面上创建一个部分,并使用以下代码调整边距,高度和宽度。

如果要打印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。

type your content here...

要么

@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;

}

#2楼

我知道这个主题已经很老了,但是我想分享一下我对该主题的经验。 实际上,我正在搜索一个可以帮助我处理日常报告的模块。 我正在用HTML + CSS编写一些文档和报告(而不是Word,Latex,OO等)。 其目标是将它们打印在A4纸上,以便与朋友共享。...而不是进行搜索,我决定进行一次小型有趣的编码会议,以实施一个简单的lib,该lib可以处理“页面”,页码,摘要,标题,页脚,....最后,我在~~ 2h内完成了此操作,我知道这不是有史以来最好的工具,但就我的目的而言几乎可以。 您可以在我的仓库中查看该项目,并随时分享您的想法。 也许不是您要100%搜索的内容,但是我认为该模块可以为您提供帮助。

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

#3楼

早在2005年11月,AlistApart.com发表了一篇文章,介绍了他们如何只使用HTML和CSS来出版一本书。 请参阅: http : //alistapart.com/article/boom

这是该文章的摘录:

CSS2具有分页媒体(想像纸)的概念,而不是连续媒体(想像滚动条)的概念。 样式表可以设置页面的大小及其页边距。 可以为页面模板指定名称,元素可以声明要在其上打印的命名页面。 同样,源文档中的元素可能会强制分页符。 这是我们使用的样式表的摘录:

@page { size: 7in 9.25in; margin: 27mm 16mm 27mm 16mm; }

拥有一家美国发行商,我们得到的页面大小以英寸为单位。 作为欧洲人,我们继续进行公制测量。 CSS都接受。

设置页面大小和边距后,我们需要确保在正确的位置存在分页符。 以下摘录显示如何在各章和附录之后生成分页符:

div.chapter, div.appendix { page-break-after: always; }

另外,我们使用CSS2来声明命名页面:

div.titlepage { page: blank; }

也就是说,标题页将被打印在名称为“ blank”的页面上。CSS2描述了命名页面的概念,但是只有当页眉和页脚可用时,它们的值才变得明显。

无论如何…

由于要打印A4,因此当然需要不同的尺寸:

@page {

size: 21cm 29.7cm;

margin: 30mm 45mm 30mm 45mm;

/* change the margins as you want them to be. */

}

本文深入探讨了设置分页符等内容,因此您可能需要完整阅读。

在您的情况下,技巧是首先创建打印CSS。 大多数现代浏览器(> 2005)都支持缩放,并且已经能够基于打印CSS显示网站。

现在,您将要使Web外观看起来有些不同,并使整个设计也适应大多数浏览器(包括2005年之前的旧浏览器)。 为此,您必须创建一个Web CSS文件或覆盖打印CSS的某些部分。 在创建用于Web显示的CSS时,请记住浏览器可以具有任意大小(请考虑:“移动”到“大屏幕电视”)。 含义:对于Web CSS,最好使用可变宽度(%)设置页面宽度和图像宽度,以支持尽可能多的显示设备和Web浏览客户端。

编辑(26-02-2015)

今天,我偶然发现了SmashingMagazine上的另一篇较新的文章,该文章还深入探讨了使用HTML和CSS设计打印的情况,以防万一您可以使用另一本教程。

编辑(30-10-2018)

引起我注意的是, size无效的CSS3确实是正确的-我只是重复了文章中引用的代码(如前所述),它是旧的CSS2(当您查看本文的年份时,这很有意义)并且该答案首次​​发布)。 无论如何,以下是有效的CSS3代码,以方便您进行复制和粘贴:

@media print {

body{

width: 21cm;

height: 29.7cm;

margin: 30mm 45mm 30mm 45mm;

/* change the margins as you want them to be. */

}

}

如果您认为确实需要像素( 实际上应该避免使用pixel ),则必须选择正确的DPI进行打印:

72 dpi(网络)= 595 X 842像素

300 dpi(打印)= 2480 X 3508像素

600 dpi(高质量打印)= 4960 X 7016像素

但是,我会避免麻烦,只需使用cm (厘米)或mm (毫米)来进行大小调整,因为这样可以避免出现渲染故障,具体取决于您使用的客户端。

#4楼

A4尺寸为210x297mm

因此,您可以设置HTML页面以使其适合CSS尺寸:

html,body{

height:297mm;

width:210mm;

}

#5楼

从技术上讲,您可以,但是要使所有浏览器完全按照屏幕上的显示打印出页面,需要大量的工作。 同样,大多数浏览器在打印输出上强制使用URL,打印日期和页码,但这并非总是如此。 这不能更改或禁用。

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值