前端window.print() 打印方案、优化策略总结

发布时间:2025-05-19 14:47:15 发布人:远客网络

一、前端window.print() 打印方案、优化策略总结

1、在处理网页打印需求时，我发现仅使用window.print()方法往往不足以满足项目要求，尤其是在样式和内容展示方面存在不足。通过深入研究优化方案，我总结了以下几点关键点：

2、默认情况下，window.print()可能无法正确分页，导致内容只显示一页或显示不完整。此外，布局和样式容易发生错位或丢失，且无法实现局部打印。

3、为解决样式问题，引入针对打印机或预览的CSS代码是关键。可以使用如下几种方式加载打印样式：

4、直接在HTML文档中通过``标签引入CSS。

5、使用`@import`规则在打印媒体中引入CSS。

6、内联样式，确保使用`media="print"`属性。

7、媒体查询，利用`@media`在不同打印场景下应用不同样式。

8、去除页眉页脚有助于优化打印输出，通过`@page`规则可以调整页眉页脚的显示。此外，控制分页的`page-break`属性（如`page-break-before`、`page-break-after`和`page-break-inside`）也非常重要。

9、为了实现局部打印，可以利用JavaScript封装功能，通过动态替换DOM元素实现打印所需内容的定制化。GitHub上能找到一些现成的案例，提供了一种简单实现方案，但可能需要额外处理一些功能，如自定义样式覆盖和避免默认分页问题。

10、考虑到功能强大且支持多种格式打印的方案，最终选择了printJS库。该库提供了丰富的功能配置，支持多种输出格式，简化了打印流程。在使用过程中，遇到了一些问题，如在使用`image`格式时的跨域错误，以及内网CDN导致的样式丢失。解决这些问题后，printJS成为了理想的解决方案。

11、总结起来，网页打印优化需要考虑样式、布局、分页和打印格式等多个方面。通过上述方案的实践，已能满足项目需求。未来可能还需进一步探索，以实现更高效、更灵活的打印解决方案。

二、jsp调用js的变量

1、首先在jsp页面上，定义二个变量。

2、然后在页面下方，添加一个js脚本块。

3、在脚本块里定义一个js变量，然后使用jsp的输出标记，输出jsp的变量s，赋值给js变量。

4、在页面里有一个js脚本方法，假设这个方法要用到jsp的变量。

5、可以直接使用js的那个变量就行了，因为这个变量就是使用jsp输出标记赋值jsp的变量值的。

6、最后运行jsp页面，在浏览器的控制台，可以看到输出的值就是jsp定义的变量的值了。

三、clodopprint32.exe是什么东西

Lodop是一款专业的WEB打印控件，其设计目标是简单易用、功能足够强大，开创WEB打印开发的新局面。

Lodop设计者对WEB下的打印开发任务进行了分类汇总，高度抽象，设计出仅用几个功能函数，就可实现复杂的打印任务，尽量减少使用者的知识累赘。控件发布包有3个系统文件组成，全部功能用几个控件参数和2组功能函数来实现。

Lodop发布包内主要有如下几个文件：

该文件是控件安装和升级的主文件，提供给用户或开发者下载安装，如果不特意拦截一般都能100%安装，对“网页插件安装难”有一定改善。如果将其复制或改名为uninstall_lodop.exe(名前加un)就可用其卸载控件。

Lodop安装后，在操作系统目录WINDOWS\system32下会安装两个实体文件：CAOSOFT_WEB_PRINT_LODOP.OCX和NPCAOSOFT_WEB_PRINT_lodop.dll，前一个文件是OCX文件，后者是Npplugin文件，其作用是实现多浏览器支持。目前Lodop支持IE系列、IE内核系列(遨游、360、世界之窗、腾讯TT、搜狗等)浏览器，以及Firefox(火狐)系列、Chrome(谷歌)系列、Opera系列、Safari系列等Windows下几乎所有的浏览器。

-waitXX该参数设置安装程序运行完毕后自动关闭窗口，这里的XX表示关闭前等待的秒数，如果是0秒则安装（或卸载）成功后立即关闭，例如：–wait8

-nowindow该参数设置安装程序运行时不出现窗口。

-un该参数使程序执行卸载操作，参数优先于文件名。

-in该参数使程序执行安装操作，参数优先于文件名。

该文件是用来引导安装控件的一个JS文件，是个样例，但建议直接采用。其中getLodop的任务是判断浏览器的类型并决定采用哪个对象实例，并检测控件是否安装、是否最新版本、并引导安装或升级。文件内容如下：

01.function getLodop(oOBJECT,oEMBED){

02.var strHtml1=" 打印控件未安装!点击这里<a href='install_lodop.exe'>执行安装</a>,安装后请刷新页面或重新进入。";

03.var strHtml2=" 打印控件需要升级!点击这里<a href='install_lodop.exe'>执行升级</a>,升级后请重新进入。";

04.var strHtml3=" (注：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】中先卸载它)";

07.if(navigator.appVersion.indexOf("MSIE")>=0) LODOP=oOBJECT;

09.if((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")){

10.if(navigator.userAgent.indexOf('Firefox')>=0)