window.print() 前端实现网页打印详解

lxf2023-05-18 01:51:08

首页 > vue
> 正文

前言

print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。

一、print()方法

print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>printDemo</title>
</head>
<body>
  <input type="button" value="打印此页面" onclick="printpage()" />
  <div>内容</div>
  <script>
    function printpage() {
      window.print()
    }
  </script>
</body>
</html>

window.print() 前端实现网页打印详解

二、打印样式

直接调用print()方法去打印网页内容，我们会发现，事先调整好的布局和样式都没法实现，那么有哪些方法可以帮助我们改善打印的用户体验呢？

【1】使用打印样式表

配置一份打印样式表print.css，引入到HTML文档，在%20<link>%20上加上一个%20media="print"%20来标识这是打印机才会应用的样式表，这样打印的时候，就会默认将该样式表应用到文档中

<link%20href="/path/print.css"%20media="print"%20rel="stylesheet"%20/>

【2】使用媒介查询

当我们要修改的样式没有很多的时候，其实完全不需要重新写个样式表，只要写上一个媒介查询也可以达到同样的效果，如：

@media%20print%20{
%20%20h1%20{
%20%20%20%20font-size:%2020px;
%20%20%20%20color:%20red;
%20%20}
}

【3】内联样式使用media属性

<style%20type="text/css"%20media="print">
%20%20%20//%20打印样式
</style>

【4】在css中使用@import引入打印样式表

@import%20url("/path/print.css")%20print;

三、打印指定区域部分内容

【1】方法一

在需要打印的正文内容所对应的html开始处加上%20%20标识，结尾处加上%20%20标识，截取打印标识之间的内容替换body的内容，调用打印print()方法。

<body>
%20%20<input%20type="button"%20value="打印此页面"%20onclick="printpage()"%20/>

%20%20<!--startprint-->
%20%20<div%20id="printContent">打印内容</div>
%20%20<!--endprint-->

%20%20<script>
%20%20%20%20function%20printpage()%20{
%20%20%20%20%20%20let%20oldStr%20=%20window.document.body.innerHTML;%20//%20获取body的内容
%20%20%20%20%20%20let%20start%20=%20"<!--startprint-->";%20//%20开始打印标识,%2017个字符
%20%20%20%20%20%20let%20end%20=%20"<!--endprint-->";%20//%20结束打印标识
%20%20%20%20%20%20let%20newStr%20=%20oldStr.substr(oldStr.indexOf(start)%20+%2017);%20//%20截取开始打印标识之后的内容
%20%20%20%20%20%20newStr%20=%20newStr.substring(0,%20newStr.indexOf(end));%20//%20截取开始打印标识和结束打印标识之间的内容
%20%20%20%20%20%20window.document.body.innerHTML%20=%20newStr;%20//%20把需要打印的指定内容赋给body
%20%20%20%20%20%20window.print();%20//%20调用浏览器的打印功能打印指定区域
%20%20%20%20%20%20window.document.body.innerHTML%20=%20oldStr;%20//%20body替换为原来的内容
%20%20%20%20}
%20%20</script>
</body>

【2】方法二

将需要打印的内容用一个大的div包裹，打印时将body的内容替换为该div的内容，调用打印print()方法。

<body>
%20%20
%20%20<input%20type="button"%20value="打印此页面"%20onclick="printpage()"%20/>
%20%20<div%20id="printContent">打印内容</div>

%20%20<script>
%20%20%20%20function%20printpage()%20{
%20%20%20%20%20%20let%20newstr%20=%20document.getElementById("printContent").innerHTML;
%20%20%20%20%20%20let%20oldstr%20=%20document.body.innerHTML;
%20%20%20%20%20%20document.body.innerHTML%20=%20newstr;
%20%20%20%20%20%20window.print();
%20%20%20%20%20%20document.body.innerHTML%20=%20oldstr;
%20%20%20%20%20%20return%20false;
%20%20%20%20}
%20%20</script>
</body>

【3】方法三

有两个事件可以监听到到打印事件，一个是onbeforeprint(),一个是onafterprint()，分别表示打印事件触发前后。%20

检测打印请求，提供一个打印前的处理事件onbeforeprint()%20将一些不需要打印的元素隐藏，和打印后的处理事件%20onafterprint()放开隐藏的元素

%20%20%20%20window.onbeforeprint%20=%20function(event)%20{
%20%20%20%20%20%20//将一些不需要打印的元素隐藏
%20%20%20%20};
%20%20%20%20window.onafterprint%20=%20function(event)%20{
%20%20%20%20%20%20//放开隐藏的元素
%20%20%20%20};

四、强制插入分页

【1】page-break-before（指定元素前添加分页符）

值	描述
auto%20	默认值。如果必要则在元素前插入分页符。
always	在元素前插入分页符。
avoid%20	避免在元素前插入分页符。
left	在元素之前足够的分页符，一直到一张空白的左页为止。
right%20	在元素之前足够的分页符，一直到一张空白的右页为止。
inherit%20	规定应该从父元素继承%20page-break-before%20属性的设置。

/*%20在h1元素前始终插入分页符%20*/
@media%20print%20{
%20%20%20%20h1%20{page-break-before:%20always;}
}

【2】page-break-after（指定元素后添加分页符）

值	描述
auto%20	默认值。如果必要则在元素后插入分页符。
always	在元素后插入分页符。
avoid%20	避免在元素后插入分页符。
left	在元素之后足够的分页符，一直到一张空白的左页为止。
right%20	在元素之后足够的分页符，一直到一张空白的右页为止。
inherit%20	规定应该从父元素继承%20page-break-after%20属性的设置。

/*%20在%20.footer%20元素后始终插入分页符%20*/
@media%20print%20{
%20%20%20%20.footer%20{page-break-after:%20always;}
}

【3】page-break-inside（用于设置是否在指定元素中插入分页符）

值	描述
auto%20	默认。如果必要则在元素内部插入分页符。
avoid%20	避免在元素内部插入分页符。
inherit%20	规定应该从父元素继承%20page-break-inside%20属性的设置。

/*%20避免在%20<pre>%20与%20<blockquote>%20元素中插入分页符%20*/
@media%20print%20{
%20%20%20%20pre,%20blockquote%20{page-break-inside:%20avoid;}
}

【4】注意

不能对绝对定位的元素使用以上三种分页属性。
请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

五、设置打印布局（横向、纵向、边距）

%20@media%20print%20{
%20%20%20%20@page%20{
%20%20%20%20%20%20/*%20纵向%20*/
%20%20%20%20%20%20size:%20portrait;%20

%20%20%20%20%20%20/*%20横向%20*/
%20%20%20%20%20%20size:%20landscape;

%20%20%20%20%20%20/*%20边距%20上右下左%20*/
%20%20%20%20%20%20margin:%201cm%202cm%201cm%202cm;
%20%20%20%20}
%20%20}

六、去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，使得内容不会延伸到页面的边缘，再通过设置%20body%20元素的%20margin%20来保证%20A4%20纸打印出来的页面带有外边距

@media%20print%20{
%20%20@page%20{
%20%20%20%20margin:%200;
%20%20}
%20%20body%20{
%20%20%20%20margin:%201cm;
%20%20}
}

七、打印方法封装

【1】封装：在utils下新建print.js文件

export%20default%20function%20printHtml(html)%20{
%20%20let%20style%20=%20getStyle();
%20%20let%20container%20=%20getContainer(html);

%20%20document.body.appendChild(style);
%20%20document.body.appendChild(container);

%20%20getLoadPromise(container).then(()%20=>%20{
%20%20%20%20window.print();
%20%20%20%20document.body.removeChild(style);
%20%20%20%20document.body.removeChild(container);
%20%20});
}

//%20设置打印样式
function%20getStyle()%20{
let%20styleContent%20=%20`#print-container%20{
%20%20%20%20display:%20none;
}
@media%20print%20{
%20%20%20%20body%20>%20:not(.print-container)%20{
%20%20%20%20%20%20%20%20display:%20none;
%20%20%20%20}
%20%20%20%20html,
%20%20%20%20body%20{
%20%20%20%20%20%20%20%20display:%20block%20!important;
%20%20%20%20}
%20%20%20%20#print-container%20{
%20%20%20%20%20%20%20%20display:%20block;
%20%20%20%20}
}`;
%20%20let%20style%20=%20document.createElement("style");
%20%20style.innerHTML%20=%20styleContent;
%20%20return%20style;
}

//%20清空打印内容
function%20cleanPrint()%20{
%20%20let%20div%20=%20document.getElementById('print-container')
%20%20if%20(!!div)%20{
%20%20%20%20document.querySelector('body').removeChild(div)
%20%20}
}

//%20新建DOM，将需要打印的内容填充到DOM
function%20getContainer(html)%20{
%20%20cleanPrint()
%20%20let%20container%20=%20document.createElement("div");
%20%20container.setAttribute("id",%20"print-container");
%20%20container.innerHTML%20=%20html;
%20%20return%20container;
}

//%20图片完全加载后再调用打印方法
function%20getLoadPromise(dom)%20{
%20%20let%20imgs%20=%20dom.querySelectorAll("img");
%20%20imgs%20=%20[].slice.call(imgs);

%20%20if%20(imgs.length%20===%200)%20{
%20%20%20%20return%20Promise.resolve();
%20%20}

%20%20let%20finishedCount%20=%200;
%20%20return%20new%20Promise(resolve%20=>%20{
%20%20%20%20function%20check()%20{
%20%20%20%20%20%20finishedCount++;
%20%20%20%20%20%20if%20(finishedCount%20===%20imgs.length)%20{
%20%20%20%20%20%20%20%20resolve();
%20%20%20%20%20%20}
%20%20%20%20}
%20%20%20%20imgs.forEach(img%20=>%20{
%20%20%20%20%20%20img.addEventListener("load",%20check);
%20%20%20%20%20%20img.addEventListener("error",%20check);
%20%20%20%20})
%20%20});
}

【2】使用：%20引入print文件，传入需要打印的DOM元素

import%20printHtml%20from%20"@/utils/print.js"

export%20default%20{
%20%20methods:%20{
%20%20%20%20print()%20{
%20%20%20%20%20%20let%20printData%20=%20`<div>打印内容</div>`
%20%20%20%20%20%20printHtml(printData)
%20%20%20%20}
%20%20},
}

文章每周持续更新，可以微信搜索「%20前端大集锦%20」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

上一篇如何阅读 ECMAScript 规范 - 第一部分

下一篇深入浏览器

window.print() 前端实现网页打印详解

前言

一、print()方法

相关专题