HTML 打印问题汇总

前帮客户做合同和协议打印的时候，收集过一些打印相关的资料，整理了一下内容，分享给有需要的朋友。

如何发起打印
如何只局部打印
分页
不询问直接打印
无边距打印
自定义页码
横向打印
双面打印
打印多份

发起打印的方法

window.print() 打印整个页面，所有主要浏览器都支持 print() 方法，执行后会启动一个打印对话框，Chrome的打印对话框自带预览功能，IE、火狐只弹出打印设置对话框，没有预览功能。
document.execCommand("print") 该方式也兼容各个版本的浏览器，功能同window.print()一样，不过已经不建议使用了。
使用html 标签<object>引入Webbrowser控件，这种方式只兼容IE，部分调用方式如下：

<body>
  <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"></object>
</body>
<script>
  WebBrowser.ExecWB(1,1) // 打开 
  WebBrowser.ExecWB(2,1) // 关闭现在所有的IE窗口，并打开一个新窗口 
  WebBrowser.ExecWB(4,1) // 保存网页
  //--------------- 常用 --------------
  WebBrowser.ExecWB(6,1) // 打印
  WebBrowser.ExecWB(6,6) // 直接打印
  WebBrowser.ExecWB(7,1) // 打印预览
  WebBrowser.ExecWB(8,1) // 打印页面设置
  //------------------------------------- 
  WebBrowser.ExecWB(10,1) // 查看页面属性
  WebBrowser.ExecWB(15,1) // 撤销
  WebBrowser.ExecWB(17,1) // 全选
  WebBrowser.ExecWB(22,1) // 刷新
  WebBrowser.ExecWB(45,1) // 关闭窗体无提示
</script>

直接用JQuery插件

jquery.print.js 地址：https://github.com/DoersGuild/jQuery.print

jquery.print-preview.js 地址：https://github.com/etimbo/jquery-print-preview-plugin

通过$("#id").print(/options/)和$('#id').printArea(/options/)调用，其中的options可以配置一些选项，具体看对应的说明文档。

采用第三方浏览器插件

收费的、不收费的都有，这里就不多提了。

复杂的套打可以选第三方插件。jQuery插件是封装的print方法，我前几年给银行网点做了个小系统需要局部打印，选了插件，其实没有很理想，需要自己做一些调整才行。大部分情况用print就能解决。

局部打印

页面上显示的内容与最终需要打印的内容之间总是存在差异的，从两个方向解决这个问题，一个是打印时只显示需要打印的部分，另一个是打印前调整页面的内容，只保留需要打印的部分。可以用到下面几个方法：

css media query 可以写一些只在打印时有效的样式，例如控制页面某个按钮打印时隐藏

@media print{
    .no-print{
        display:none
    }
}

可以用onbeforeprint和onafterprint在打印前重新编辑内容，专门送去打印，打印后又处理回来。

function window.onbeforeprint()
{ //将一些不需要打印的隐藏 }

function window.onafterprint()
{ //放开隐藏的元素 }

// polyfill
// 对于基于Webkit的浏览器，您可以创建一个等效的结果window.matchMedia('print')。
// var mediaQueryList = window.matchMedia('print');
// mediaQueryList.addListener('change', function(mql) {
//   if(mql.matches) {
//     console.log('webkit equivalent of onbeforeprint');
//   }
// });

onbeforeprint 在设置页面打印之后但是在打印对话框出现之前执行 JavaScript

onafterprint 定义为在设置页面打印且打印对话框已出现之后，执行一段 JavaScript。只有 Internet Explorer 和 Firefox 支持 onafterprint 事件属性。但是：在 IE 中，onafterprint=属性在打印对话框出现之前而不是之后发生。

onbeforeprint fired before dialog appears and allows one to change html and so on.onafterprint is fired just before dialog appears. It is not even possible to know, whether document was actually printed or user canceled it. Needless to say about when printing finished (if started at all).Again: no event is available to track anything happened in print dialog, i.e. answer to your question is no.Moreover, I hope what your need will never be implemented, cause this allows to frustrate user. He/she asks to print one document, but got something different.

改变页面内容的方式体验比较糟糕，个人不推荐，jq插件默认是用iframe，其实还可以window.open一个单独的打印页面，预览和打印都好解决，两种方式都需要注意样式表是在原来的页面，需要稍微注意下样式是否有缺失。

分页

page-break-before:always;
page-break-after:always;
page-break-inside:avoid;

用样式可以控制主动使用分页符，没用过的可以看下这里

http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp

不询问直接打印

有3种办法，但都有限制

使用插件实现

网上下载ScriptX.cab文件
下载成功后将文件放在项目某个目录下,然后在页面body中写上:

<object id="factory" name="factory" style="display: none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="ScriptX.cab" viewastext></object>

codebase属性为ScriptX.cab文件的放置路径(绝对路径)
调用：factory.printing.Print(false)即可

webbrowser实现

需要修改IE浏览器安全设置，否则还是会弹出对话框

安全 -> 本地Intranet -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用
安全 -> 受信任的站点 -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用
安全 -> 受信任的站点 -> 站点 -> 添加受信任访问站点(如果是访问远程那么是对方IP地址,如果是本地则是本机IP.例如http://192.168.172.1)

然后执行

document.getElementById('WebBrowser').ExecWB(6,2,3)

vb实现结合webbrowser实现

可以使用vb，但是IE11开始已经被微软废弃，无法执行vb代码了。

execScript('document.getElementById("WebBrowser").ExecWB 6, 2, 3','vbscript');

无边距打印

无边距打印是打印机的一种功能，即全幅打印，打印纸不留空白。
适用于照片打印，广告打印，海报打印等。
目前的主流打印机都有支持该功能的型号。
当在应用程序中创建用于打印的数据时，需要调整数据到打印纸的尺寸。如果应用程序中有边距设置，应确保在打印前将它们设为零。
注意：
使用此功能进行打印将比普通打印要花更长时间。
使用此功能打印输出的顶部和底部区域的打印质量可能会下降，或者在上面未列出的介质上打印时该区域可能会污损。在打印大量的作业之前先打印一页以检查打印质量。

自定义页码

遇到的一个需求，只打印合同中需要填写数据的几页，不能使用自带的页码，所以把自带的页码去掉，然后写个div定位到原来页码的位置，里面的内容就可以自己控制了。需要注意：
1. 页面打印区域的原因，不是在任意打印机上都可以把页码打印在纸张的边缘，需要根据打印机的可打印区域调整。
2. 页码需要使用到绝对定位，所以要求打印的内容是确定的，目前遇到有这个需求的，打印内容也都是固定的。

横向打印

chrome 支持 @page 规则

@page{size : A4 lanscape;}

双面打印

需要在打印首选项中设置。

注意：有时候需要通过加个空白页来让后面的内容从新的一张纸开始打印。

打印份数

打印设置里可以修改，不过很难用程序控制打印份数。可以曲线实现，在打印的时候，直接把内容重复N遍再打印一份出来的就是N份了。

时代变得真快，现在的IE都已经退出了历史舞台。新框架一个接一个冒出来，老系统里的这些老代码，不知道什么时候会消失。

浏览网页时，大家有时候会发现网页中对工作、生活以及学习方面有益的资料，当网页上的资料比较重要时，大家可以将网页上的资料打印出来，网页上的资料怎么打印出来呢？

其实，打印网页上的资料是比较简单的，大家可以直接将网页上的资料另存到电脑本地，如果自己所使用的电脑和打印机相连接，直接使用打印机打印即可；如果没有打印机的话，也可以选择在网上打印资料。

网上打印好处多多，在网上可以直接打印各种文件资料，直接搜索网上打印平台易桌面打印室，大家可以直接将整理在电脑本地的资料上传到打印平台，选择打印的份数、规格等，系统自动为大家估算价格，在易桌面打印室打印资料的价格是比较便宜的，具体的打印价格可参考官方网站的价格表。

易桌面打印室打印速度较快，可能单凭一个“快”字，大家无法感受到该平台的打印速度，打个比方吧，比如打印者当天下午15:00前在平台提交的少于1000页的文件资料，一般可在当天下午发货，如果在14:00~15:00间提交的量比较大的资料，当天如果不能打印完成，会在第二天优先打印并安排发货。

另外，易桌面打印室作为一家专业的网上在线打印平台，除了可以为大家打印资料文件外，还可以为大家装订文件、资料，支持钉装、胶装等，平台有专业的装订设备，可以快速为大家装订各种文件资料，装订价格也比较便宜。

ello，各位小伙伴，今天广州蓝景跟大家分享前端技术干货，页面加载速度问题。

首先我们都讨厌加载缓慢的页面！

要知道加载时间每增加1秒（0-5秒之间），网站转化率就会平均下降4.42%。页面加载时间的前五秒对转化率的影响最大。

幸运的是，我们可以通过优化HTML和CSS文件来提高网站的页面加载速度，而无需花费昂贵的服务器资源！

注：本文将仅关注如何使用HTML和CSS文件来提高页面加载速度。

延迟加载

延迟加载是一种缩短关键渲染路径长度的策略，从而减少页面加载时间。

a）拆分CSS文件

尽量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上执行。

<!-- 加载和解析整个sytles.css文件会阻塞主浏览器渲染 -->
<link rel="stylesheet" href="styles.css" />

对于打印媒体，可以使用：

<!-- 加载和解析print.css时不会阻塞渲染，只会在打印模式加载该样式 -->
<link rel="stylesheet" href="print.css" media="print" />

对于移动设备屏幕，可以使用：

<!-- 只会在移动设备这样的小屏幕下才会加载和解析该样式 -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" />

对于平板电脑屏幕，可以使用：

<!-- 不会在大屏幕上加载和解析该样式 -->
<link
rel="stylesheet"
href="tablet.css"
media="screen and (max-width: 1080px)" />

对于移动屏幕横屏或竖屏，也可以使用不同的CSS文件：

<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

通过将CSS分离成多个文件，主文件（在本例中为styles.css）变得小多了，从而减少了渲染被阻塞的时间，大大提高了页面加载速度。

b） CSS的font-display属性

font-display属性应用于@font-face规则，定义浏览器如何加载和显示字体文件，从而允许在字体加载或加载失败时以回退字体显示文本。这可以通过使文本可见取代空白屏幕来提高性能，但代价是闪烁无样式的文本。

@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}

c） HTML文件中的图片懒加载

使用loading="lazy"，以便仅在需要时加载图像。这将大大降低页面加载速度。

<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />

2. 选择正确的图片格式

.webp格式的图片被推荐作为网络的图片格式标准。

WebP无损图片在尺寸方面比PNG小26%。WebP有损图片比同等SSIM质量指数下的同类JPEG图片小25-34%。动画WebP图片支持有损、无损和透明，与GIF和APNG相比，可以提供更小的尺寸。

下图是WebP与PNG图片格式对比：

下图是WebP与JPEG图片格式对比：

所有这些测试都可以证明，即使是有损压缩，webp图片的压缩率也更高，因此大大减少了页面加载时间！

你还可以尝试另一种图片格式.avif，在少数情况下比.webp更好，但由于该格式比较新（2019年发布），因此还没有多少浏览器支持.avif格式！

使用<picture>元素

a）可用于针对不同的media条件裁剪或修改图片（例如，在较小的显示器上加载大图片的缩略版本）。

b）在不支持webp格式的情况下提供替代图片格式。

c）通过为查看器加载最合适的图片来节省带宽并加快页面加载时间。

如果为高DPI显示器提供更高分辨率的图像版本，请改用<img>元素上的srcset。这允许浏览器在数据保存模式下选择低分辨率版本，并且你不必编写显式media条件。

<picture>
<source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
<source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
<source srcset="my-logo-narrow.webp" type="image/webp" />
<img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>

3. 渲染图像

由于图像是异步加载的，并在第一次绘制后继续加载，如果在加载之前未定义其尺寸，则可能会导致重排到页面内容。例如，文本因加载图像而被推下页面。因此，设置width和高height属性至关重要，以便浏览器可以在布局中为它们保留空间。

对于任何background-image，设置background-color值很重要，以便在下载图像之前，覆盖的内容保持可读。

4. 压缩HTML和CSS文件

压缩指的是从代码中删除所有不必要的字符以减小尺寸。删除的是不需要的空格字符，如空格、换行符、制表符等以及注释。

使用压缩工具，如CodeBeautify，CSS Minifier等来缩小HTML和CSS文件。有助于为网站提供更快的页面加载速度。

在线咨询

上一篇：Python自动发送邮件：详细教程与示例代码
下一篇：HTML表单元素初识2-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商