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

教程下载所在： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/
目次

• 前言
  
• 一、print()方法
  
• 二、打印样式
  
• 三、打印指定地区部分内容
  
• 四、欺压插入分页
  
• 五、设置打印布局（横向、纵向、边距）
  
• 六、去除欣赏器默认页眉页脚
  
• 七、打印方法封装
  
• 总结?
  

前言

print作为欣赏已经比力成熟的技能可以经常被用来打印页面的部分内容，我们可以在MDN上检察到相干的简单先容。
一、print()方法

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

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <title>printDemo</title>
6. </head>
7. <body>
8.   <input type="button" value="打印此页面" οnclick="printpage()" />
9.   <div>内容</div>
10.   <script>
11.     function printpage() {
12.       window.print()
13.     }
14.   </script>
15. </body>
16. </html>

复制代码

二、打印样式

直接调用print()方法去打印网页内容，我们会发现，事先调解好的布局和样式都没法实现，那么有哪些方法可以资助我们改善打印的用户体验呢？
【1】使用打印样式表
设置一份打印样式表print.css，引入到HTML文档，在 上加上一个 media=“print” 来标识这是打印机才会应用的样式表，如许打印的时间，就会默认将该样式表应用到文档中

1. <link href="/path/print.css" rel="external nofollow"  media="print" rel="stylesheet" />

复制代码

【2】使用前言查询
当我们要修改的样式没有许多的时间，着实完全不须要重新写个样式表，只要写上一个前言查询也可以到达同样的结果，如：

1. @media print {
2.   h1 {
3.     font-size: 20px;
4.     color: red;
5.   }
6. }

复制代码

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

1. <style type="text/css" media="print">
2.    // 打印样式
3. </style>

复制代码

【4】在css中使用@import引入打印样式表
@import url(“/path/print.css”) print;
三、打印指定地区部分内容

【1】方法一
在须要打印的正文内容所对应的html开始处加上   标识，末端处加上  标识，截取打印标识之间的内容更换body的内容，调用打印print()方法。

1. <body>
2.   <input type="button" value="打印此页面" οnclick="printpage()" />

复制代码

<!–startprint–>
  打印内容 <!–endprint–> 【2】方法二
将须要打印的内容用一个大的div包裹，打印时将body的内容更换为该div的内容，调用打印print()方法。

1. <body>

复制代码

<input type=“button” value=“打印此页面” οnclick=“printpage()” />
  打印内容 【3】方法三
有两个事故可以监听到到打印事故，一个是onbeforeprint(),一个是onafterprint()，分别表现打印事故触发前后。
检测打印哀求，提供一个打印前的处理惩罚事故onbeforeprint() 将一些不须要打印的元素隐蔽，和打印后的处理惩罚事故 onafterprint()放开隐蔽的元素

1. window.onbeforeprint = function(event) {
2.   //将一些不需要打印的元素隐藏
3. };
4. window.onafterprint = function(event) {
5.   //放开隐藏的元素
6. };

复制代码

四、欺压插入分页

【1】page-break-before（指定元素前添加分页符）
值
形貌
auto
默认值。如果须要则在元素前插入分页符。
always
在元素前插入分页符。
avoid
克制在元素前插入分页符。
left
在元素之前富足的分页符，不停到一张空缺的左页为止。
right
在元素之前富足的分页符，不停到一张空缺的右页为止。
inherit
规定应该从父元素继续 page-break-before 属性的设置。

1. /* 在h1元素前始终插入分页符 */
2. @media print {
3.     h1 {page-break-before: always;}
4. }

复制代码

【2】page-break-after（指定元素后添加分页符）
值
形貌
auto
默认值。如果须要则在元素后插入分页符。
always
在元素后插入分页符。
avoid
克制在元素后插入分页符。
left
在元素之后富足的分页符，不停到一张空缺的左页为止。
right
在元素之后富足的分页符，不停到一张空缺的右页为止。
inherit
规定应该从父元素继续 page-break-after 属性的设置。

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

复制代码

【3】page-break-inside（用于设置是否在指定元素中插入分页符**）**
值
形貌
auto
默认。如果须要则在元素内部插入分页符。
avoid
克制在元素内部插入分页符。
inherit
规定应该从父元素继续 page-break-inside 属性的设置。

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

复制代码

【4】注意

• 不能对绝对定位的元素使用以上三种分页属性。
  
• 请尽大概少地使用分页属性，而且克制在表格、浮动元素、带有边框的块元素中使用分页属性。
  

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

1. @media print {
2.     @page {
3.       /* 纵向 */
4.       size: portrait;

复制代码

}
六、去除欣赏器默认页眉页脚

页眉打印默认有页眉页脚信息，显现到页面外边距范围，我们可以通已往除页面模子page的外边距，使得内容不会延伸到页面的边沿，再通过设置 body 元素的 margin 来包管 A4 纸打印出来的页面带有外边距

1. @media print {
2.   @page {
3.     margin: 0;
4.   }
5.   body {
6.     margin: 1cm;
7.   }
8. }

复制代码

七、打印方法封装

【1】封装：在utils下新建print.js文件
export default function printHtml(html) {
let style = getStyle();
let container = getContainer(html);
document.body.appendChild(style);
document.body.appendChild(container);
getLoadPromise(container).then(() => {
window.print();
document.body.removeChild(style);
document.body.removeChild(container);
});
}
// 设置打印样式
function getStyle() {
let styleContent = #print-container { display: none; } @media print { body > :not(.print-container) { display: none; } html, body { display: block !important; } #print-container { display: block; } };
let style = document.createElement(“style”);
style.innerHTML = styleContent;
return style;
}
// 清空打印内容
function cleanPrint() {
let div = document.getElementById(‘print-container’)
if (!!div) {
document.querySelector(‘body’).removeChild(div)
}
}
// 新建DOM，将须要打印的内容添补到DOM
function getContainer(html) {
cleanPrint()
let container = document.createElement(“div”);
container.setAttribute(“id”, “print-container”);
container.innerHTML = html;
return container;
}
// 图片完全加载后再调用打印方法
function getLoadPromise(dom) {
let imgs = dom.querySelectorAll(“img”);
imgs = [].slice.call(imgs);
if (imgs.length === 0) {
return Promise.resolve();
}
let finishedCount = 0;
return new Promise(resolve => {
function check() {
finishedCount++;
if (finishedCount === imgs.length) {
resolve();
}
}
imgs.forEach(img => {
img.addEventListener(“load”, check);
img.addEventListener(“error”, check);
})
});
}
**【2】使用：**引入print文件，传入须要打印的DOM元素
import printHtml from “@/utils/print.js”
export default {
methods: {
print() {
let printData = <div>打印内容</div>
printHtml(printData)
}
},
}
总结

到此这篇关于window.print()前端实现网页打印功能的文章就先容到这了,更多相干window.print()前端网页打印内容请搜索网赚博客https://www.piaodoo.com/从前的文章或继续欣赏下面的相干文章盼望各人以后多多支持网赚博客https://www.piaodoo.com/！

1.                         友情连接：  

复制代码

茂名一技http://www.szsyby.net/
茂名一技http://www.enechn.com/
美文集http://www.tpyjn.cn/
手游排行前十名http://www.bjkhrx.com/
蔚来汽车http://www.weilaiqiche.cn/