前端网页打印window.print()

article/2025/9/15 0:56:39

前言
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="打印此页面" οnclick="printpage()" />
  <div>内容</div>
  <script>
    function printpage() {
      window.print()
    }
  </script>
</body>
</html>

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

【1】使用打印样式表

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

【2】使用媒介查询

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

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

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

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

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

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

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

【1】方法一

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

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

【2】方法二

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

<body>
  
  <input type="button" value="打印此页面" οnclick="printpage()" />
  <div id="printContent">打印内容</div>
 
  <script>
    function printpage() {
      let newstr = document.getElementById("printContent").innerHTML;
      let oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      window.print();
      document.body.innerHTML = oldstr;
      return false;
    }
  </script>
</body>

【3】方法三

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

检测打印请求，提供一个打印前的处理事件onbeforeprint() 将一些不需要打印的元素隐藏，和打印后的处理事件 onafterprint()放开隐藏的元素
    window.onbeforeprint = function(event) {
      //将一些不需要打印的元素隐藏
    };
    window.onafterprint = function(event) {
      //放开隐藏的元素
    };

四、强制插入分页
【1】page-break-before（指定元素前添加分页符）

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

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

值    描述
auto     默认值。如果必要则在元素后插入分页符。
always    在元素后插入分页符。
avoid     避免在元素后插入分页符。
left    在元素之后足够的分页符，一直到一张空白的左页为止。
right     在元素之后足够的分页符，一直到一张空白的右页为止。
inherit     规定应该从父元素继承 page-break-after 属性的设置。
/* 在 .footer 元素后始终插入分页符 */
@media print {
    .footer {page-break-after: always;}
}

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

值    描述
auto     默认。如果必要则在元素内部插入分页符。
avoid     避免在元素内部插入分页符。
inherit     规定应该从父元素继承 page-break-inside 属性的设置。
/* 避免在 <pre> 与 <blockquote> 元素中插入分页符 */
@media print {
    pre, blockquote {page-break-inside: avoid;}
}
【4】注意

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

五、设置打印布局（横向、纵向、边距）
 @media print {
    @page {
      /* 纵向 */
      size: portrait; 
 
      /* 横向 */
      size: landscape;
 
      /* 边距 上右下左 */
      margin: 1cm 2cm 1cm 2cm;
    }
  }
六、去除浏览器默认页眉页脚

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

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

七、打印方法封装

【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)
    }
  },
}


http://chatgpt.dhexx.cn/article/bujRtC1S.shtml

相关文章

web打印的几种方案

web打印的几种方案

轉自&#xff1a;http://elf8848.iteye.com/blog/626790 -------------------------------------------一 基于Web的打印方案比较分析-------------------------------- 　　基于web的套打&#xff0c;难度在于要将浏览器中呈现的html&#xff0c;精确地打印到票据中&#xf…
阅读更多...
HttpPrinter实现web打印功能

HttpPrinter实现web打印功能

HttpPrinter实现web打印功能 WEB套打可选方案不多&#xff0c;理想的更少&#xff0c;利用免费控件HttpPrinterJavaScript实现精确套打&#xff0c;算是较为经典的选择。这种方案其实比较简单&#xff0c;利用一个htm文件就可以实现模板设计过程&#xff0c;几乎是“空手套”式…
阅读更多...
web打印实现几种方法

web打印实现几种方法

在工作中出现web打印的情况是非常多的&#xff0c;其实这也是一个比较烦人的问题&#xff0c;这篇博客整理一下关于Web打印的一些方法或者方式。 1. window.print() 这个方法是用来打印网页的&#xff0c;页面上的其他的元素也会被打印处理&#xff0c;在打印的时候页眉页脚是…
阅读更多...
Web打印

Web打印

布鲁斯李 Web打印 随着10i新版本的发布&#xff0c;在10i的iserver中&#xff0c;内置了一个web打印服务。是指将您在 Web 应用中制作的 Web 内容输出为可打印的文档。那么如何使用该服务&#xff0c;请继续往下看&#xff1a; 执行一次成功的web打印任务&#xff0c;我们需要…
阅读更多...
实现WEB打印的几种方法

实现WEB打印的几种方法

当前WEB应用开发非常流行&#xff0c;主要原因是WEB应用客户端的规则很简单&#xff0c;容易学习&#xff0c;容易维护&#xff0c;容易发布&#xff0c;降低了开发难度。但是&#xff0c;WEB应用的打印一直以来却是一个难题&#xff0c;特别是在应用中完成标签打印&#xff08…
阅读更多...
web打印三种实现方式

web打印三种实现方式

web打印的方式可分为三种&#xff1a; 直接调用浏览器打印通过javascript插件调用浏览器打印通过第三方程序直接调用打印机 一、直接调用浏览器打印 通过在javascript代码中调用window.print()函数实现&#xff0c;浏览器会自动获取当前页面内容&#xff0c;并打开浏览器的打…
阅读更多...
html纵向广告滚动条,网页右侧的漂浮广告代码，随滚动条滚动

html纵向广告滚动条,网页右侧的漂浮广告代码，随滚动条滚动

HTML代码(即需要漂浮的广告)&#xff1a; js代码&#xff1a;前提是必须要引入jquery文件 $(function(){ $(window).scroll(function(){ var scrollTop document.body.scrollTop || document.documentElement.scrollTop || 0; $(".christmas_ad").stop(); var scrol…
阅读更多...
php浮动广告,JavaScript实现漂浮广告代码的实例总结

php浮动广告,JavaScript实现漂浮广告代码的实例总结

我们在打开网页的时候&#xff0c;我们会发现不管是什么网页都会有很多漂浮的广告&#xff0c;有很多人都会在想&#xff0c;这样的效果是怎么实现的呢&#xff1f;今天我们就带大家详细介绍下JavaScript实现漂浮广告代码的实例总结&#xff01; 第一种 漂浮广告 不符合W3C Jav…
阅读更多...
html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码

html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码

如果有一定的JavaScript基础&#xff0c;制作浮动广告还是比较容易的。直接上代码了&#xff1a;无标题文档 *{ margin:0; padding:0; } #csdn { width:800px; margin:0 auto; } #ad { position:absolute; right:0px; top:30px; z-index:1; } #cl { position:absolute; right:0…
阅读更多...
php 漂浮广告代码,JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

php 漂浮广告代码,JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码。分享给大家供大家参考&#xff0c;具体如下&#xff1a; 这里演示了始终随屏滚动的JavaScript代码&#xff0c;在国内的应用泛滥成灾了&#xff0c;特别是一些喜欢漂浮广告的站长&#xff0c;常把本代码用作了漂…
阅读更多...
html左侧浮动广告代码,纯js网页浮动广告代码

html左侧浮动广告代码,纯js网页浮动广告代码

网上一般的网页浮动广告代码都是基于jquery的&#xff0c;受jiquery版本及浏览器限制&#xff0c;非常容易出现不兼容的情况&#xff0c;本站分享一段纯js网页浮动广告代码&#xff0c;简单兼容。 html代码&#xff1a; javascript代码&#xff1a; window.οnlοadfunction(){…
阅读更多...
HTML将广告关闭的JS代码,带关闭漂浮广告代码_漂浮广告js代码_漂浮窗口模式关闭...

HTML将广告关闭的JS代码,带关闭漂浮广告代码_漂浮广告js代码_漂浮窗口模式关闭...

带关闭漂浮广告代码带关闭漂浮广告代码带关闭按钮地网页漂浮广告代码 x ff.js代码 var xpos = 20; var ypos = document.body.clientheight; var step = 1; var delay = 30; var height = 0; var hoffset = 0; var woffset = 0; var yon = 0; var xon = 0; var pause = true; v…
阅读更多...
漂浮广告代码

漂浮广告代码

<!doctype html> <html> <head> <meta charset"utf-8"> <title>漂浮广告代码</title> <script src"http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> &…
阅读更多...
php漂浮广告代码,JS随机漂浮广告代码具体实例

php漂浮广告代码,JS随机漂浮广告代码具体实例

复制代码 代码如下: var xPos0,yPos0;//x,y轴坐标 var xon0;//图片在x轴移动方向 var yon0;//图片在y轴移动方向 var step1; //移动距离 var imgdocument.getElementByIdx_x("float");//图片层 function floatP() { var widthdocument.body.clientWidth;//浏览器…
阅读更多...
JS实现漂浮广告功能

JS实现漂浮广告功能

JS实现漂浮广告功能 前言一、漂浮广告案例 前言 漂浮广告非常简单也是老案例了&#xff0c;在网页的设计中可直接拿去用&#xff0c;原理都是我之前文章所讲到的&#xff0c;如果有什么不明白的可以看看我之前的文章&#xff0c;仅供参考学习。 一、漂浮广告案例 我在这个案例…
阅读更多...
C语言课后习题(1)

C语言课后习题(1)

谭浩强C语言第五版的一些课后习题 常用头文件&#xff1a; #include<stdio.h> #include<stdlib.h> #include<math.h> #include<string.h> #include<stdbool.h> 注意事项&#xff1a; 1)获取输入的字符串时&#xff0c;gets保留空格 scanf遇到空格…
阅读更多...
C语言课后习题（计算增长率比值

C语言课后习题（计算增长率比值

#include <stdio.h>int main() {double p,r;int n;p1.00;r0.07;for(n1;n<10;n){pp*(1r);}printf("%lf\n",p);return 0; } 假如我国国民生产总值的年增长率为7%&#xff0c; 计算10年后我国国民生产总值与现在相比增长多少百分比。计算公式,r为年增长率&…
阅读更多...
c语言字符串作业题,C语言课后习题练习（四）

c语言字符串作业题,C语言课后习题练习（四）

(ps:提前声明一下&#xff1a;课后习题是备份给自己看的&#x1f602;) 1.输入3个整数&#xff0c;按由小到大的顺序输出 int main() { void swap(int *p1, int * p2); int n1, n2, n3; int *p1, *p2, *p3; printf("input three integer n1,n2,n3:"); scanf("%d…
阅读更多...
翁恺C语言课后习题

翁恺C语言课后习题

1 时间换算&#xff08;5分&#xff09; 题目内容&#xff1a; UTC是世界协调时&#xff0c;BJT是北京时间&#xff0c;UTC时间相当于BJT减去8。现在&#xff0c;你的程序要读入一个整数&#xff0c;表示BJT的时和分。整数的个位和十位表示分&#xff0c;百位和千位表示小时…
阅读更多...
啊哈C语言课后练习题

啊哈C语言课后练习题

第 四 章 第四节 项目一&#xff1a;求1~100所有偶数的和。 问题代码/*copyright (啊哈C语言), 学习C *All rights reserved. *文件名称:myfirstc. *作者&#xff1a;JohnLu *完成日期&#xff1a;2020年3月17日 *版本号V1.0 * *问题描述&#xff1a;求1~100所有偶数的和。 …
阅读更多...
推荐文章

Copyright @ 2022~2023