一、思路

1.打开新窗口

2.在新窗口的document中添加需要打印的内容

3.在新窗口中添加style标签，设置打印样式

4.打印

5.取消打印时,关闭当前页面

二、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打印测试</title>
</head>
<body><button id="print">打印</button><div id="print-area"><div class="blessing"><div class="item">新年新气象</div><div class="item">愿平安喜乐</div><div class="item">愿身体健康</div><div class="item">愿国泰民安</div></div></div>
</body>
<script>let printButton = document.getElementById("print");printButton.addEventListener('click', () => {// 打开一个新窗口let newWindow = window.open();console.log("newWindow", newWindow)newWindow.document.title = "我要打印一些东西";// 在新窗口中添加要打印的htmllet printArea = document.getElementById("print-area").innerHTML;newWindow.document.body.innerHTML = printArea;// 设置打印样式let styleNode = document.createElement("style");styleNode.setAttribute("type", "text/css");// css样式不可以嵌套let printStyle = `.blessing{text-align: center;}.item{color:red;font-size:28px;}`styleNode.innerHTML = printStyle;newWindow.document.head.appendChild(styleNode)//打印newWindow.print();//点取消时,关闭打开的新窗口newWindow.close();})
</script>
</html>

三、效果

1.原始html页面

2.打印页面

希望对你有帮助！

如有错误，欢迎指正！

浏览器打印功能---js相关推荐

浏览器打印功能print.js
插件文档:https://printjs.com/ npm文档: https://www.npmjs.com/package/print-js npm install print-js --save ...
记录个js调用浏览器打印功能的代码
对应的是浏览器鼠标右键打印功能 function printPage() {document.body.innerHTML=document.getElementById('printdiv').in ...
JS调用浏览器打印功能
function doPrint() { //取得浏览器的userAgent字符串var userAgent = navigator.userAgent.toLowerCase();if (userA ...
HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码)，复制代码代码如下: html - phpStudy...
js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...
jQuery.print插件实现浏览器打印功能
最近客户希望能直接打印页面中表格数据,不想导到Excel中再打印,以减少操作步骤,提高效率,直接调用的浏览器的打印功能显示满足不了客户需求,后来找到了一个jquery的打印插件jQuery.print ...
jqprint实现浏览器打印功能
之前做了二维码打印功能,中间遇到了一点"奇怪"的问题,这里说下,希望大家遇到了同样的问题,不必为此苦恼... 首先在页面引入两个js文件:jquery.jqprint-0.3.js ...
如何调用浏览器打印功能来打印页面
最近项目需要做一个打印功能,是点击一个按钮成功后调用jQuery的打印功能,网上找了找,有一个jQuery打印插件jqprint. 首先需要创建一个打印区域 <div style="w ...
一个前端er使用浏览器打印功能快速制作PDF简历
前言过年完回来,从广州搬回了佛山居住,打算换一份佛山的工作,在准备简历的时候,想起之前在公司负责过一个浏览器打印的功能,可以利用这个原理,快速生成一个pdf简历,甚至乎加上媒体查询,放自己服务器上面 ...
vue-print-nb 打印功能总结
一.安装vue-print-nb 1 vue2安装 npm install vue-print-nb --save 2 vue3 安装 npm install vue3-print-nb --save ...

浏览器打印功能---js

一、思路

二、代码

三、效果

浏览器打印功能---js相关推荐

最新文章

热门文章