web打印时，各种页面样式设置

最近碰到这个问题，我需要将网页打印成PDF文件。Chrome可直接将网页保存（打印）为PDF（无需安装Adobe），但式样跟网页上显示的截然不同。我测试了一下用法，了解了其中的一些原理和解决方法，总结如下。

Chrome保存为PDF的界面上只有很少几个选项：

这几个选项都浅显易懂。但需要注意的是，这里并没有让选「纸张大小」。Chrome在保存为PDF文件时，默认纸张大小是A4。若布局为纵向，显示大小为210mm×297mm；若布局为横向，显示大小为297mm×210mm。

这时候需提到一个DPI（Dot Per Inch）的指标。Windows下的网页打印的默认DPI为96dpi。按照1英寸=25.41mm换算，A4纸张可实际显示的像素宽度为794px×1123px，即打印网页的宽度为794px。

实际打印还会有页边距，如果页边距为5mm（窄边距），网页内容最大宽度约750px，若页边距为19mm（默认边距），网页内最大元素分辨率约650px。

基于此，很多网页在打印时会变形，因为打印时内容容器的宽度只有750px或者650px，但现在的网页内容大多都是基于至少1000px以上宽度设计的，这时候浮动容器会错位、超过宽度的图片和表格会显示不完全。

解决办法有两个：

其一，锁定网页的宽度。

当网页宽度被指定时，页面将被自动缩放。这可以保证PDF文件和浏览器上显示的效果一模一样。这时候打印出的PDF文件仍是A4大小。

其二，指定打印纸张大小。

@media print {
@page {
size: 210mm 297mm; /* or size: 794px 1123px; */
size: 297mm 420mm; /* or size: 1123px 1588px; */
}
}

@page size有很多种用法，详细介绍见相关文档。通过指定不同的size，可以将文件打印成不同的纸张大小。这个效果和上面指定锁定网页宽度略有不同。

原文地址：http://zhiqiang.org/blog/it/print-width-in-chrome.html

web打印时，各种页面样式设置相关推荐

window.print()打印时根据页面高度设置居中显示、设置打印布局（纵向、横向）
1.页面定义打印div按钮:  <div style="position: absolute;top:100;right:0px;z-ind ...
web打印时,复杂表格横向自动分页
如果需要打印一个有很多列的表格,因为纸张宽度有限,后面的列可能打印不出来,怎么办?一开始,我们建议用户使用控件的自动缩放打印功能,但用户的问题是,当表格很宽时,这样缩小后的页面,打印出来的字就太小,甚 ...
React-Navigation 4.x 安卓仿iOS 切换页面样式设置 push/native
React-Navigation 4.x 使用官网注意 CardStyleInterpolators 导入的地址是 import {CardStyleInterpolators} from 're ...
关于页面打印window.print()的样式问题
当我们打印网页的时候.有时候会发现.打印出来的.跟网页上看到的样式的差别有点大.这其中可能有的问题是.样式问题. 当调用打印(window.print())方法时.打印机会在网页的样式中查找 @med ...
WEB打印插件jatoolsPrinter
为什么选择 jatoolsPrinter 免费版? 支持无预览直接打印真正免费,不加水印,没有ip或域名限制,不限时间,兼容ie6+ 无须注册,下载即用提供经过微软数字签名的cab自动安装包,安装 ...
web 打印样式设置注意问题
1.在@print 中可以设置只有在打印时才显示的样式. 2.@print中设置的样式如果在普通情况下已经设置,需要添加!important 来强制替换 3.打印时如果一个element的posit ...
解决IE浏览器打印iframe页面时字体等样式缩小的问题
解决IE浏览器打印iframe页面时字体等样式缩小的问题目录 1.问题描述 2.解决方案 3.代码 1.问题描述问题主要集中于打印 iframe, 前端调用浏览器打印功能,在谷歌,火狐浏览器上预览 ...
web网页打印设计的CSS样式
大多数Web设计师对打印控制还不是很熟悉,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 为打印机而不是屏幕设计的样式 1 2 3 4 5 /* 样式将只应用于打印 */ @media ...
php控制打印机打印设置,专为控制打印设计的CSS样式
大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...
lodop+art-template实现web端漂亮的小票样式打印
一. 现状由于之前采用Lodop打印控件(商业版付费,可以使用免费版但是会有水印)去打印小票,是一行一行的打印,但是不满足UI给到复杂布局的小票样式,所以得重新考虑如何来实现. 二. 介绍 art ...

web打印时，各种页面样式设置

web打印时，各种页面样式设置相关推荐

最新文章

热门文章