一文弄懂window

		iframeDoc.write('<div>' + printContent + '</div>');setTimeout(function(){iframe.contentWindow.print();document.body.removeChild(iframe);}, 50);}
</script>


## 三、强行插入分页当需要自定义打印分页时机时，可通过如下方式将指定 DOM 设为分割点。1.在指定元素前添加分页符

@media print {h1 {page-break-before: always;}
}


2.在指定元素后添加分页符

@media print {h1 {page-break-after: always;}
}


## 四、打印设置1.设置打印布局

@media print {
@page {
/* 纵向展示（高度展示内容更多） */
/* size: portrait;*/
/* 横向（宽度展示内容更大） */
size: landscape;
/* 打印的边距 上右下左 */
margin: 1cm 2cm 1cm 2cm;
}
}


注意，`一旦设置为 size: landscape，在打印时将不能切换展示模式，包括纸张类的设置`。## 五、最佳实践（React）### 1. 背景：有一个信息填写页面，支持进行预览和打印，预览是一个 Dialog 弹框，打印取自于预览的内容。因此，在打印前，需要将预览内容呈现在 DOM 树上。### 2. 思路：1. 点击打印，将预览 Dialog open state 设置为 true，Dialog 渲染到 DOM 树上；
2. 执行 setTimeout 延迟任务，在 Dialog 渲染在 DOM 树上后对其隐藏（disabled: none），目的是实现视图上不展示 Dialog；
3. 创建 iframe，并将 Dialog 内容及其样式，写入 iframe.document 中；
4. 执行 iframe.contentWindow.print() 进行打印；
5. 打印完成后做一些重置处理：移除 iframe、将 Dialog 隐藏逻辑去掉、将 Dialog open state 置为 false；  这样，在`不影响现有页面内容的展示，同时实现了打印 Dialog 内容。`### 3. 实现：

const printFocus = () => {
// 打印事件
// 1.挂载要打印的内容
setPreviewOpen(true);
setTimeout(() => {
// 延迟，等待 Dialog 渲染在 DOM 树上
// 2.隐藏要打印的内容
const container =document.querySelector(‘.preview-wrapper’);
container.setAttribute(‘style’,‘display: none;’);
// 3. 创建
iframeconst iframe =document.createElement(‘iframe’);
const printContent =container.innerHTML;
iframe.setAttribute(‘style’, ‘position: absolute; width: 0;height: 0;’);
document.body.appendChild(iframe);
const doc =iframe.contentWindow.document;
// 4. 写入内容//
doc.write(‘’);
doc.write(<link href="./preview-focus.css" media="print" rel="stylesheet" />);
doc.write(‘

’+ printContent + ‘
’);
const link = doc.getElementsByTagName(‘link’)[0];
link.onload = () => {
// 样式文件加载完毕后打印
// 5.执行打印
iframe.contentWindow.print();
// 6.重置工作
document.body.removeChild(iframe);
setPreviewOpen(false);
container.removeAttribute(‘style’);
}
},0);
} 


## 六、如果干预打印分页通常我们会遇到这种情况：在打印内容多于一页时会自动进行分页，若分页的分割点恰巧是一行文字，就会出现文字被切割分别显示在上下两页。尽管我们可以通过 CSS 属性 page-break-before: always; 来干预分页，但页面内容并非固定的，如何将这个属性恰巧应用在分割点的 DOM 元素之上呢？下面有一个思路可以参考一下：1.为可能会被分割的元素设置自定义属性，用于查找访问；  2.根据打印视窗的每页高度，粗估一个高度值，作为页面分割的参考；  3.遍历可分割元素，判断它们是否处于页面分割位置（top < pageHeight && botton > pageHeight）；  4.若处于页面分割位置，为此 DOM 设置分割属性 page-break-before: always;。  **代码实现**：

## 七、 window.print去除浏览器默认页眉页脚打印时默认有页眉页脚信息，显示在页面外边距范围，我们可以通过去除页面模型page的外边距，使其隐藏页眉页脚信息，再通过设置 body 元素的 margin 来保证打印出来的页面带有外边距

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

//打印(兼容IE浏览器)

function webPrint(objId){

var printContent=document.getElementById(objId).innerHTML;//获得需要打印内容的HTML代码

PageSetup_Null();//把页眉页脚设置为空

printWindow=window.open(‘’,‘_blank’);

printWindow.document.write(‘ ’);

//这里是向新建的窗口写入HTML的head信息，可引入自己的js和css，以供打印时样式与网页中显示的一致

printWindow.document.write(‘

’+printContent+“
”);

//这里向新建的窗体中写入BODY的内容，注意，外边加的额外DIV是有必要的，它里面CSS可以控制打印时不会出现空白页

printWindow.document.write(“”);//这里向新建的窗体写入HTML的结束标记

printWindow.document.close();//关闭新建窗口的文档输出流，否则下面的打印语句无效

printWindow.print();//打印当前新建窗口中的内容

printWindow.close();//关闭新建的窗口

PageSetup_Default();//把页眉页脚恢复为默认

}

//设置网页打印的页眉页脚为空

function PageSetup_Null(){

var HKEY_Root,HKEY_Path,HKEY_Key;

HKEY_Root=“HKEY_CURRENT_USER”;

HKEY_Path=“\Software\Microsoft\Internet Explorer\PageSetup\”;

try{

var Wsh=new ActiveXObject("WScript.Shell");HKEY_Key="header";Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");HKEY_Key="footer";Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");

}catch(e){}

}

//设置网页打印的页眉页脚为默认值

function PageSetup_Default(){

var HKEY_Root,HKEY_Path,HKEY_Key;

HKEY_Root=“HKEY_CURRENT_USER”;

HKEY_Path=“\Software\Microsoft\Internet Explorer\PageSetup\”;

try{

var Wsh=new ActiveXObject("WScript.Shell");HKEY_Key="header";Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码，&p/&P");HKEY_Key="footer";Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d");

}catch(e){}

}


### window.print() 实现A4纸张打印及去掉页眉页脚及打印链接
测评表 
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
打印 
</div>    

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>/\*\*

* [打印]
* @return {[type]} [description]
*/
function preview()
{
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr=“ ”;//设置打印开始区域
eprnstr=“ ”;//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
}


### window.print() 去掉页眉页脚及打印链接![在这里插入图片描述](https://img-blog.csdnimg.cn/ab811b6a87514bc8a2113665e9dd3ec0.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/73799f7f561f4db4961e099e8b347937.png)  ![在这里插入图片描述](https://img-blog.csdnimg.cn/4ad69a88ecf049d49c9b03298d3af5b7.png)## 八 、IE浏览器打印预览 ：使用html 标签引入Webbrowser控件最近遇到这么一个需求，需要在IE浏览器上打印的时候，不直接调用打印机，而是先打开打印预览页面，再进行打印操作。  这样，就需要对原本的打印方法进行改写了。`使用html 标签<object>引入Webbrowser控件`，这种方式优势是在I`E下可以弹出打印预览，这是打印很人性化的功能，但是遗憾的是高版本的IE浏览器不支持WebBrowser`了。  具体实现如下：

function printall(){
// 打印页面预览
if (!!window.ActiveXObject || “ActiveXObject” in window){//IE浏览器
$(“.noprint”).css(“display”,“none”);
try{
//增加打印预览
printWB.ExecWB(7, 1);
}catch(e){
alert(e);
}finally{
$(“.noprint”).css(“display”,“”);
}
}else{
//需要引入jquery.jqprint-0.3.js
$(‘#a’).jqprint();
}
}


附该对象常用的方法：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/34368.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Godot4自学手册】第四十二节实现拖拽进行物品交换和数量叠加

【Godot4自学手册】第四十二节实现拖拽进行物品交换和数量叠加

这一节我们主要学习背包系统中的物品拖拽后&#xff0c;物品放到新的位置&#xff0c;或交换物品位置&#xff0c;如果两个物品属于同一物品则数量相加。具体效果如下&#xff1a; 一、修改item.tscn场景 给item.tscn场景的根节点Item添加Label子节点&#xff0c;命名为Numv…
阅读更多...
vue3基于axios配置请求拦截器响应拦截器以及无感刷新token的实现

vue3基于axios配置请求拦截器响应拦截器以及无感刷新token的实现

vue3基于axios配置请求拦截器响应拦截器以及无感刷新token的实现 一、下载并引入 axios二、引入 element-plus 消息提示三、配置基础地址四、创建 axios 实例五、配置请求拦截器六、定义是否刷新 token 的变量以及存储请求队列的数组七、配置响应拦截器以及实现无感刷新 token八…
阅读更多...
Linux CentoS安装RabbitMQ：一键安装指南

Linux CentoS安装RabbitMQ：一键安装指南

有两种安装方法&#xff0c;官方推荐使用 docker安装RabbitMQ 一、Docker安装RabbitMQ 1、安装docker 参考我之前的文章&#xff1a;Centos7.5搭建docker并且部署Lnmp环境&#xff08;小白入门docoker&#xff09;_centos7.5安装docker和docker-compose-CSDN博客 2、安装Ra…
阅读更多...
【实用软件】Paragon NTFS for Mac 15下载及安装教程

【实用软件】Paragon NTFS for Mac 15下载及安装教程

​习惯上来说所有操作只需轻轻一点&#xff1a;轻量级的快捷菜单栏&#xff0c;可访问所有NTFS驱动器并执行最常见的卷操作&#xff0c;如挂载&#xff0c;卸载和验证&#xff0c;从菜单栏中快速启动NTFS for Mac界面&#xff0c;一键点击&#xff0c;更加方便。11510182322410…
阅读更多...
Scope XY Project的使用

Scope XY Project的使用

1.Scope XY Project的功能介绍与使用方法 添加监控变量 绘制成一个三角形 XY进行对调操作 修改XY轴的比例修改显示输出 2.Cursor的使用方法 游标线的添加测量 3.Reporting功能的使用方法 到处对应的报表数据 添加对应的报告数据
阅读更多...
一、Jquery入门（超详）

一、Jquery入门（超详）

* [5.3 jQuery 对象和 DOM 对象之间的相互转换](about:blank#53_jQuery__DOM__271)* * [5.3.1 jQuery 对象转换为 DOM 对象](about:blank#531_jQuery__DOM__282)* [5.3.2 DOM 对象转换为 jQuery 对象](about:blank#532_DOM__jQuery__295)六、 解决 jQuery 和其他库的冲…
阅读更多...
vue3 中v-model语法糖（2024-06-21）

vue3 中v-model语法糖（2024-06-21）

一、 vue2 中 v-model 语法糖 实现父子组件双向数据绑定&#xff0c;一个输入框或者组件指定绑定一个 v-model 1. 父组件写法 <template><div><h1>App</h1><h2>{{ count }}</h2><input type"text" v-model"count&quo…
阅读更多...
Apache Calcite - 使用框架Sql解析器解析Sql

Apache Calcite - 使用框架Sql解析器解析Sql

前言 Calcite提供了org.apache.calcite.sql.parser.SqlParser来解析sql&#xff0c;通过访问者模式&#xff0c;在解析过程中访问Sql中的不同元素&#xff0c;最终完成特定的功能。 使用举例 使用Calcite解析SQL主要涉及以下几个步骤&#xff1a; 创建SqlParser对象&#xf…
阅读更多...
Linux：基础IO（三.软硬链接、动态库和静态库、动精态库的制作和加载）

Linux：基础IO（三.软硬链接、动态库和静态库、动精态库的制作和加载）

上次介绍了基础IO&#xff08;二&#xff09;&#xff1a;Linux&#xff1a;基础IO&#xff08;二.缓冲区、模拟一下缓冲区、详细讲解文件系统&#xff09; 文章目录 1.软硬链接1.1硬链接1.2软链接使用场景 2.动态库和静态库1.1回顾1.2静态库的制作和使用为什么要有库制作者角度…
阅读更多...
重学java 85.Java反射、注解、枚举总结

重学java 85.Java反射、注解、枚举总结

凡事往好处想&#xff0c;人生便会豁达 —— 24.6.24 一、Junit单元测试 1.概述: Junit是一个单元测试框架,可以代替main方法去执行其他的方法 2.使用 a.导入jar包 b.注解 Test —— 单独执行一个方法 Before —— 在Test之前执行.有多少个Test执行.Before对应的方法就执行多少…
阅读更多...
常见排序算法及其C语言实现

常见排序算法及其C语言实现

排序算法在计算机科学中是一个非常重要的主题。本文将详细介绍几种常见的排序算法&#xff0c;包括快速排序、归并排序、堆排序、冒泡排序、选择排序、插入排序、桶排序和二分查找插入排序&#xff0c;并提供每种算法的C语言实现代码。 1. 快速排序&#xff08;Quick Sort&…
阅读更多...
毫米波移动通信系统中的波束赋形—模数混合的波束赋形架构

毫米波移动通信系统中的波束赋形—模数混合的波束赋形架构

模数混合的波束赋形将波束赋形分为了模拟波束赋形与数字波束赋形两部分&#xff0c;其模拟部分通过移相器实现&#xff0c;数字部分通过基带预编码实现&#xff0c;&#xff0c;其结构如图2所示。当射频链路数目NRF为1时&#xff0c;认为其是一种特殊的模数混合的波束赋形。 此…
阅读更多...
【计算机视觉】人脸算法之图像处理基础知识【七】

【计算机视觉】人脸算法之图像处理基础知识【七】

直方图均衡化 直方图均衡化是一种常用的图像处理技术&#xff0c;用于改善图像的对比度&#xff0c;特别是在图像的细节被埋没在暗部或亮部区域时。通过重新分配图像的像素强度值&#xff0c;使得图像的整体对比度增强&#xff0c;从而让更多的细节变得可见。 import cv2 imp…
阅读更多...
最小生成树模板（prim,heap-prim,kruskal）

最小生成树模板（prim,heap-prim,kruskal）

prim 出圈法&#xff0c;时间复杂度 O ( n 2 ) O(n^2) O(n2) #include<iostream> #include<vector> using namespace std; #define MAX_N 5000 #define inf 100000000 struct edge{int v,w; }; vector<edge>e[MAX_N5]; int d[MAX_N5],vis[MAX_N5]; int n,m…
阅读更多...
IO-Iink事件

IO-Iink事件

IO-LINK事件功能 IO-Link的事件功能是其通信协议中的一项重要特性&#xff0c;主要用于传输设备的故障信息和维护信息。IO-Link支持三种数据类型&#xff1a;过程数据、参数数据和事件数据。其中&#xff0c;事件数据就是用于此目的。 当IO-Link设备&#xff08;如传感器或执…
阅读更多...
NepnepxCATCTF Pwn-Chao

NepnepxCATCTF Pwn-Chao

文章目录 参考类型混淆异常处理的栈回退机制虚表和类的恢复假想的程序结构逆向工程场景步骤解析 idabug检查找虚表strupsc_str()alloca异常逆向maindisplayupdatecreate 新东西exp和思路 参考 https://www.cnblogs.com/winmt/articles/17018284.html 类型混淆 关于C中由虚函…
阅读更多...
Java中如何解决BadPaddingException异常？

Java中如何解决BadPaddingException异常？

Java中如何解决BadPaddingException异常&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;BadPaddingException异常是一个…
阅读更多...
HarmonyOS Next开发学习手册——应用启动框架AppStartup

HarmonyOS Next开发学习手册——应用启动框架AppStartup

概述 AppStartup提供了一种简单高效的初始化组件的方式&#xff0c;开发者可以使用AppStartup来显示的设置组件的初始化顺序以及之间的依赖关系&#xff0c;支持异步初始化组件加速应用的启动时间。开发者需要分别为待初始化的组件实现AppStartup提供的 StartupTask 接口&…
阅读更多...
DoubleSummaryStatistics 及其相关类之-简介

DoubleSummaryStatistics 及其相关类之-简介

1. DoubleSummaryStatistics 使用简介 在Java 8中&#xff0c;DoubleSummaryStatistics 类被引入作为 java.util 包的一部分。它是一个用于收集统计数据&#xff08;如计数、最小值、最大值、和、平均值等&#xff09;的类&#xff0c;特别适用于处理 double 类型的数据。 Do…
阅读更多...
【OpenGauss源码学习 —— （ALTER TABLE（修改表空间））】

【OpenGauss源码学习 —— （ALTER TABLE（修改表空间））】

ALTER TABLE&#xff08;列存删除列&#xff09; ALTER TABLE ... SET TABLESPACEExecChangeTableSpaceForRowTable 函数ATExecSetTableSpace 函数 ExecChangeTableSpaceForRowPartition 函数ATExecSetTableSpaceForPartitionP3 函数 ExecChangeTableSpaceForCStoreTable 函数C…
阅读更多...
最新文章

Copyright @ 2022~2023