一文弄懂window

最新推荐文章于 2024-06-26 22:23:41 发布

2401_85124286

最新推荐文章于 2024-06-26 22:23:41 发布

阅读量893

点赞数 17

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/2401_85124286/article/details/139940176

版权

		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(){