当前位置： 首页 > 编程日记 > 正文

window.print()前端实现打印功能

编程日记 2024-05-30 09:50:00

方法介绍

window.print()方法用于打印当前窗口的内容。
默认打印页面中body里的所有内容。
调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印配置。

1. 打印方法

1.1 打印当前窗口内容

示例demo如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window.print()打印测试</title>
</head>
<script>function doPrint() {window.print()}
</script>
<body>
<button onclick="doPrint()">打印</button>
<div style="width: 300px; height: 100px; border: 1px solid black">打印内容区域
</div>
</body>
</html>

打印demo示例效果图

1.2 打印指定区域内容

1.2.1 方式1：截取当前页面需要打印的内容

示例demo如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window.print()打印测试</title>
</head>
<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; // 把需要打印的指定内容赋给bodywindow.print(); // 调用浏览器的打印功能打印指定区域window.document.body.innerHTML = oldStr; // body替换为原来的内容}
</script>
<body><input type="button" value="打印此页面" onclick="printpage()"/><!--startprint--><div id="printContent">打印内容</div><!--endprint-->
</body>
</html>

在这里插入图片描述
在这里插入图片描述

注： 该种方式会修改当前窗口的显示内容，比如上述示例代码中的打印按钮，显示打印预览窗口时，浏览器页面上打印按钮会消失。

1.2.2 方式2：打印页面指定的元素区域内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window.print()打印测试</title>
</head>
<script>function printpage() {let newstr = document.getElementById("printContent").innerHTML;let oldstr = document.body.innerHTML;document.body.innerHTML = newstr;window.print();document.body.innerHTML = oldstr;}</script>
<body><input type="button" value="打印此页面" onclick="printpage()" /><div id="printContent" style="width: 300px; height: 100px; border: 1px solid black">打印内容区域</div>
</body>
</html>

注： 该种方式，也会修改当前窗口的内容。

上述两种打印方法会将页面的元素内容改变，在项目中，有时不允许修改当前窗口的内容，可以使用window.open()方法打开一个新的浏览器窗口。

2. 打印样式

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

3. 去除浏览器默认页眉页脚

<style type="text/css" media="print">@media print {@page {margin: 0;}body {margin: 1cm; // 此处样式根据实际需要进行设置}}
</style>

参考文档：

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

  2. Window 对象 | 菜鸟教程


https://www.dkcj.cn/info/8495.html

相关文章：

.NET 4.0 Interop新特性ICustomQueryInterface （转载）

.NET 4.0 Interop新特性ICustomQueryInterface 在.NET Framework v4.0发布的新功能中&#xff0c;在名字空间System.Runtime.InteropServices新增加了一个叫做ICustomQueryInterface的Interface, 顾名思义&#xff0c;这个Interface的功能就是使得用户可以自己控制QueryInterf…

编程日记2024/05/30 09:40:00

HTML5 3D旋转图片相册

H5旋转3D相册&#xff0c;鼠标放置暂停&#xff0c;图片灰度级为0&#xff0c;有放大效果。 该实例运用H5和CSS3动画效果&#xff0c;未用javascript。提高了本人对CSS3 新属性的了解及掌握。 完整代码如下&#xff1a; <!DOCTYPE html> <html lang"en">…

编程日记2024/05/30 09:30:00

DHTML中style的display和visibility属性

DHTML中style的display和visibility属性 display是隐藏该对象&#xff0c;使该对象不占用页面排版空间。document.all("tr1").style.display"block"document.all("tr1").style.display"none" visibility只是在页面上看不见&#xff0c…

编程日记2024/05/30 09:20:00

多线程共享全局变量以及锁机制

多线程都是在同一个进程中运行的。因此在进程中的全局变量所有线程都是共享的&#xff0c;这就造成一个问题&#xff0c;因为线程执行的顺序是无序的&#xff0c;有可能会造成数据错误&#xff0c;为了解决这个问题&#xff0c; threading提供了一个lock类&#xff0c;这个类可…

编程日记2024/05/30 09:10:00

HTML DOM Console对象

在开发过程中对程序进行测试&#xff0c;经常使用浏览器控制台输出相关信息&#xff0c;下面详细介绍console对象的相关方法。 Console 对象 提供了访问浏览器调试模式的信息到控制台 1. console.assert()方法 用法&#xff1a;该方法在第一个参数为 false 的情况下会在控制台…

编程日记2024/05/30 09:00:00

禁止拖放对象文本被选择

禁止拖放对象文本被选择的方法&#xff1a; 1.ie中设置拖放对象的onselectstart返回false&#xff0c;在ff中设置样式MozUserSelect(css:-moz-user-select)为none。 这种方法只能禁止拖放对象本身被选择。 2. ie:document.selection.empty() ff:window.getSelection().removeAl…

编程日记2024/05/30 08:50:00

线性时间选择问题——分治

问题&#xff1a;求一个n个数的列表中第K个最小的元素。这个数字被称为第K个顺序统计量。问题求解&#xff1a; //对数组元素data[lowhigh]进行分区操作,0号单元不用intpartion(intdata[],intlow,inthigh){ data[0]data[low]; intpivotkeydata[low]; while(low<hig…

编程日记2024/05/30 08:40:00

谷歌浏览器打不开设置等页面

问题描述 谷歌浏览器打不开任何页面&#xff0c;设置页面也打不开。卸载重装不起作用。 解决方案 方案1&#xff1a;添加启动参数 右击谷歌浏览器快捷方式图标&#xff0c;打开【属性】&#xff0c;在【目标(T)】输入框中追加参数-no-sandbox&#xff0c;即在下图中箭头所指…

编程日记2024/05/30 08:30:00

Spring注解@Value

本文参考自: https://blog.csdn.net/ryelqy/article/details/77453713 Value能让我们在java代码中使用property文件的属性&#xff0c;使用Value有两种形式: 1、Value("#{configProperties[t1.msgname]}") 2、Value("${t1.msgname}") 这两种形式&#xff0…

编程日记2024/05/30 08:20:00

201621123055《JAVA程序设计》第七周学习总结

1. 本周学习总结 1.1 思维导图&#xff1a;Java图形界面总结 1.2 可选&#xff1a;使用常规方法总结其他上课内容。 答&#xff1a;GUI监听器&#xff1a;一个事件监听器对象负责处理一类事件 一类事件的每一种发生情况,分别由事件监听器对象中的一个方法来具体处理. 在事件源和…

编程日记2024/05/30 08:10:00

SQL Server 中print Datetime类型问题

declaredatedatetimesetdate2010-1-1printdateadd(dd,1,date)输出:01 2 2010 12:00AM 输出的是2010年1月2日 上午12:00 咦?那我就纳闷了,我要的是2010年1月2日 上午00:00:00 后发现原来print会将打印的数据类型隐式转换成字符串,所以就输出:01 2 2010 12:00AM这样的结果 我们…

编程日记2024/05/30 08:00:00

iis上实现虚拟目录

有时候项目中需要 将引用相同的文件 可以再iis上建立虚拟目录 &#xff08;其实就是一个文件夹&#xff09; 比如 temp文件夹在另外的站点上 可以通过虚拟目录 将其引用进来&#xff01;

编程日记2024/05/30 07:50:00

JavaScript判断对象是否为空对象或空数组

1. 判断一个变量是对象还是数组 首先判断一个变量是对象还是数组&#xff0c;不能使用typeof来判断&#xff0c;因为不管是对象还是数组&#xff0c;使用typeof得到的都是"object"。 可以使用Object.prototype.toString.call()方法。 function isObjOrArr(obj) {if …

编程日记2024/05/30 07:40:00

python_2开发简单爬虫

2017年12月03日 16:43:01 独行侠的守望 阅读数&#xff1a;204 标签&#xff1a; python爬虫 更多个人分类&#xff1a; Python编辑版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请注明文章链接。 https://blog.csdn.net/xiaoanzi123/article/details/78700863学习地…

编程日记2024/05/30 07:30:00

Mac下安装Node.js

1> brew install node 2> 查看版本&#xff1a; node --version 学习传送门&#xff1a; http://www.imooc.com/learn/637 菜鸟学习&#xff1a; http://www.runoob.com/nodejs/nodejs-http-server.html 官网&#xff1a;https://nodejs.org/zh-cn/ 转载于:https://www.…

编程日记2024/05/30 07:20:00

window对象提供的功能之窗口最大化

实现窗口最大化的基本思路是&#xff1a;首先打开一个“中转”页面&#xff0c;在该页面中用window.open方法打开一个最大化的窗口&#xff0c;并且在该窗口中将父窗口关闭。实例如下&#xff1a;ex3.html: 代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…

编程日记2024/05/30 07:10:00

Framework 4.0 新关键字dynamic 之我见（二）

Hi&#xff0c;大家好&#xff0c;随着大家对VS2010的深入了解&#xff0c;对dynamic已经是越来越了解了&#xff0c;何时该用&#xff0c;何时不用已经非常熟悉了&#xff0c;原本不打算再写下去的&#xff0c;但感觉还有点东西需要说说&#xff0c;就简单再说一下吧。 原先以…

编程日记2024/05/30 07:00:00

JavaScript 数组排序及查找数组中最大值最小值方法

JavaScript 数组排序方法及查找最大值最小值方法1. sort()方法排序1.1 方法介绍1.2 语法&#xff1a;arr.sort([compareFunction])1.3 参数说明1.4 返回值&#xff1a; 排序后的数组。1.5 方法描述2. 最大值/最小值方法2.1 查找数组中的最大值2.1.1 Math.max.apply()方法语法&a…

编程日记2024/05/30 06:50:00

35个必备的wordpress插件

博客一开始是自己写的小程序&#xff0c;但自己写程序实在太麻烦了&#xff0c;不想写&#xff0c;于是转成了bo-blog&#xff0c;用了几周&#xff0c;感觉还是不太理想&#xff0c;就又转换成了wordpress&#xff0c;这个博客程序也不是什么省油的灯&#xff0c;用起来也不是…

编程日记2024/05/30 06:40:00

1042. 托普利兹矩阵

描述 “托普利兹矩阵”是指如果从左上角到右下角的同一条主斜线上每个元素都相等的矩阵. 给定一个M x N矩阵&#xff0c;判断是否为“托普利兹矩阵”. matrix 是一个二维整数数组.matrix 的行列范围都为 [1, 20].matrix[i][j] 的整数取值范围为[0, 99].样例 样例 1: 输入: matr…

编程日记2024/05/30 06:30:00

git控制台指令

git stash: 备份当前的工作区的内容&#xff0c;从最近的一次提交中读取相关内容&#xff0c;让工作区保证和上次提交的内容一致。同时&#xff0c;将当前的工作区内容保存到Git栈中。git stash pop: 从Git栈中读取最近一次保存的内容&#xff0c;恢复工作区的相关内容。由于可…

编程日记2024/05/30 06:20:00

Web架构师必备能力

最近和几个朋友在谈到时下流行的Web 2.0&#xff0c;也提到了其中最重要的角色——架构师。多方各有争执&#xff0c;不外乎是因为背景和视角的缘故&#xff0c;包括架构一词&#xff0c;本身就从建筑学借鉴而来&#xff0c;至于架构师&#xff0c;则可以简单地从建筑学的设计师…

编程日记2024/05/30 06:10:00

深入理解C语言-二级指针三种内存模型

二级指针相对于一级指针&#xff0c;显得更难&#xff0c;难在于指针和数组的混合&#xff0c;定义不同类型的二级指针&#xff0c;在使用的时候有着很大的区别 第一种内存模型char *arr[] 若有如下定义 char *arr[] {"abc", "def", "ghi"};这种…

编程日记2024/05/30 06:00:00

如何获取URL中的参数

获取URL中的参数1. 使用JS函数获取URL参数使用示例2. Angular应用中&#xff0c;从URL中获取参数信息的方法使用示例ActivatedRoute属性1. 使用JS函数获取URL参数 function getQueryVariable(variable) {var query window.location.search.substring(1);var vars query.spli…

编程日记2024/05/30 05:50:00

windows使用.NET CORE下创建MVC,发布到linux运行

1.在有dotnet core 的环境下&#xff0c;打开控制台。创建文件夹demo1 2.创建MVC程序 3.创建完成 4.使用记事本修改一下HomeController 修改端口 5.发布 6.压缩发布的文件publish&#xff0c;通过FTP上传到linux 7.解压 8.运行 9.浏览器浏览 转载于:https://www.cnblogs.com/qq…

编程日记2024/05/30 05:40:00

Oracle正则表达式匹配中文的问题

查资料知道中文Unicode范围是\u4e00 - \u9fa5 可是自己用来正则表达式匹配中文总是用不了Unicode。最简单举例&#xff1a;select regexp_replace(abc秋歌def,[\u4e00-\u9fa5],-) from dual;结果是&#xff1a;-bc秋歌d-- 即将\u4e00-\u9fa5里面的a,b,e,f当成字符了。我用的是O…

编程日记2024/05/30 05:30:00

Oracle HowTo:如何使用Oracle case函数

通过实例简要介绍case函数的用法。1.创建测试表:DROP SEQUENCE student_sequence; CREATE SEQUENCE student_sequence START WITH 10000 INCREMENT BY 1; DROP TABLE students; CREATE TABLE students (id NUMBER(5) PRIMARY KEY,first_name VARCHAR2(20…

编程日记2024/05/30 05:20:00

Attribute 绑定、类绑定和样式绑定

Attribute 绑定、类绑定和样式绑定 1. 绑定到 Attribute 优先设置带有 Property 绑定的元素的 Property。如果没有可绑定的元素 Property&#xff0c;可以使用 Attribute 绑定。 例如&#xff0c;ARIA和SVG 只有 Attribute。 ARIA 和 SVG 都不对应于元素的 Property&#xf…

编程日记2024/05/30 05:10:00

Mixing Milk(USACO)

/* ID:tianlin2 PROG:milk LANG:C */ #include <iostream> #include <cstdlib> #include <fstream> using namespace std; typedef struct milk milk; struct milk{ int mon; int wei; }; //最大农民数 milk m[5000]; int moncmp(const void *va,const void …

编程日记2024/05/30 05:00:00

DVWA的安装与简单使用

参考资料: http://www.freebuf.com/articles/web/119150.html 尝试使用linux机器安装,但是因为下载php版本以及各种兼容性的问题耗时较长, 所以后来选择使用windows server 来进行安装: 1. 下载xampp 版本尽量使用低一些的 比如 php版本在5.4 以下 能够更简单的入门学习. 2. 下…

编程日记2024/05/30 04:50:00